8

Steps to reproduce:

  1. Open the Close dialog on a question.

  2. Position the "Vote to Close" button over the company logo in a job ad on the sidebar.

  3. Press the "Vote to Close" button.

Button overlapping job ad

Expected behavior:

My close vote should be submitted successfully.

Actual behavior:

The company jobs page opens in a new tab, and my close vote is not registered.

The click event for the ad must be taking priority over the close button. Reproduced on an ad for Vantage Robotics.


Google Chrome Version 57.0.2987.98 (64-bit)

macOS Sierra Version 10.12.4 (16E195)

Adblock Plus Version 1.13.2

6
  • no-repro. Use uBlock. Commented Apr 19, 2017 at 17:53
  • @JanDvorak Does the ad show up at all with uBlock? I'm still using ABP, and the ad appears.
    – JAL
    Commented Apr 19, 2017 at 17:54
  • Nope, no ads appear for me. Though I did have to add a cosmetic filter to get rid of the space left behind. Commented Apr 19, 2017 at 17:56
  • No repro on Windows 7 - Firefox 52 & AdBlock+/AdBlock+ Popup Blocker, with a Pendo Job Ad shown.
    – TylerH
    Commented Apr 19, 2017 at 17:57
  • 2
    That's my bad, fix going up shortly.
    – rossipedia
    Commented Apr 19, 2017 at 17:58
  • 1
    @rossipedia I can't wait to learn what caused it Commented Apr 19, 2017 at 18:01

1 Answer 1

7

TL;DR: z-index is a royal pain :(

We had an issue with the "Learn more" button on Company Page Ads. While fixing that, I discovered that we were nesting <a> tags, which is kind of a "don't do that" thing and caused some weird issues with how the browser decided to render the ad.

Fixing that involved overlaying the <a> tags for the various parts of the ad using z-index and position: absolute. Unfortunately, I picked a bad z-index value that was higher than the one used for the Vote to Close overlay.

And since z-index is apparently global to the document, that meant that the CP ad <a> elements were rendered on top of the Vote To Close dialog and prevented interaction with the areas where they overlapped.

The fix was essentially: use a smaller z-index value. It is building out to Prod now.

2
  • 2
    Out of curiosity, does Stack Overflow follow any kind of style guide re: z-index? e.g. 1, 10, 100, 200, 300, buttons should be in whole thousands and iterate by 5 up from that for other elements, etc.? Or is it just the Wild West of the Z Plane? :-)
    – TylerH
    Commented Apr 19, 2017 at 19:56
  • 2
    It's a bit wild west, but we're working on getting things like that standardized
    – rossipedia
    Commented Apr 20, 2017 at 5:37

You must log in to answer this question.

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