14

When you vote 35 times in a day and you only have five votes left, you start getting a warning popup that you are almost at your limit. When this warning appears in the same place as the tags, part of the tags shows through it.

This screen shot was taken on webmasters.

This is also a problem on Web Applications: CSS bleed-thru on tags:

web applications

and Tags element overlaps notification:

web applications

This also happens on https://gaming.stackexchange.com/ as described here. Here is a video of it happening.

It is also happening on the meta sites associated with the sites that have the problem. For example, here is web apps meta site:

web apps meta bleed through

This a minor annoyance that has been around for at least a couple years.

6
  • That would be specific to webmasters (and perhaps some other sites that styled the tags similarly). The culprit is z-index:1 found in the :before rule.
    – 3ventic
    Nov 6, 2014 at 12:15
  • I edited the question to incorporate some of the additional information from these comments. Nov 6, 2014 at 15:06
  • Hey thanks for the video link
    – 54D
    Dec 18, 2014 at 11:55
  • 2
    We are currently updating the base CSS of all four of these sites. Once we've finished with the updates. These issues should be resolved. Feb 20, 2015 at 13:23
  • Thank you! I see this is fixed on webmasters already. Feb 20, 2015 at 13:46
  • This is apparently still happening at Web Apps: Phantom triangles on downvote warning
    – ale
    Feb 26, 2015 at 1:05

2 Answers 2

6
+500

You have caught my attention on this one. A fix has been pushed and will build out soon. I also want you to know that our design team has been hard at work at converting all of our .less files to a consistent and uniform layout which will solve most of these issues in the future. Thanks for the report and we'll keep you posted on the status of the conversion.

3
  • Thanks. It looks like this has the z-index rules have been removed from all the tag CSS now. Mar 7, 2015 at 1:17
  • 1
    It is still an issue on the three meta sites where you fixed it. Can you make do the same fix for the meta sites? Mar 7, 2015 at 11:02
  • Looks like this has been "fixed" (at least on meta.gamedev) by adding a z-index: 2 !important style to the notification box, but the underlying bug (unnecessary z-indexes on the tags) is still there. Jun 23, 2015 at 19:52
7

The problem is with the z-index:1; in the rule that causes tags to look tag shaped. In the case of the gaming site it is z-index:2;.

.post-tag:before {
    content: "";
    display: block;
    width: 0px;
    position: absolute;
    border-style: solid;
    border-width: 10px 6px 10px 0px;
    border-color: transparent #DEEFF6;
    left: -6px;
    z-index: 1;
    top: 0px;
}

Here is a script I wrote to determine which StackExchange sites have this problem:

#!/bin/sh

if [ ! -e stacksites.html ]
then
    curl -s http://stackexchange.com/sites > stacksites.html
fi   

sites=`grep noscript-link stacksites.html | sed -r 's|.*http\:\/\/||g;s/\.stackexchange.*//g;s/\.(com|net).*//g' | grep -v '\.'`

for site in $sites
do
    if [ ! -e $site.css ]
    then
        curl -s http://cdn.sstatic.net/$site/all.css > $site.css
        sleep 1
    fi
    beforetag=`grep -oE '\.post-tag\:before\{[^\}]+\}' $site.css`
    if echo "$beforetag" | grep -q 'z-index'
    then
        echo $site
    fi  
    if [ ! -e ${site}meta.css ]
    then
        curl -s http://cdn.sstatic.net/${site}meta/all.css > ${site}meta.css
        sleep 1
    fi
    beforetag=`grep -oE '\.post-tag\:before\{[^\}]+\}' ${site}meta.css`
    if echo "$beforetag" | grep -q 'z-index'
    then
        echo ${site}meta
    fi
done

It appears that only a few sites have this z-index rule in conjunction with tags:

  • webapps
  • webappsmeta
  • gaming
  • gamingmeta
  • webmasters
  • webmastersmeta
  • gamedev
  • gamedevmeta

The solution to this problem appears to be to simply remove the z-index CSS rule from this location. I commented it out using Firebug on the Webmasters site and it did not change how the page is displayed other than fixing this issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .