position:fixed issue in Firefox 47 only

Question

After updating my firefox to version 47.0.1 I discovered a strange issue with position:fixed. The bellow snippets works fine in Chrome, IE and Firefox < 47. However, in Firefox 47+ the .event2 node is not clickable...

After some investigation, I found that it could be fixed by removing the z-index:0 of the .g element. Well, actually it could also be fixed by removing the z-index:3 of the .a element or by removing the overflow: hidden; of the .f element.

Fixing is not the problem, but I was wondering if anyone has a clue on what as changed in Firefox 47... Bug or on purpose ? (To me it looks like a bug...)

EDIT: I created a bug report on https://bugzilla.mozilla.org/show_bug.cgi?id=1283436

EDIT2: This is really a bug as it does not occur un Firefox 48 beta

document.querySelector('.event1').addEventListener('click', function() {
  alert('foo');
})
document.querySelector('.event2').addEventListener('click', function() {
  alert('bar');
})

.a {
  z-index: 3;
  position: relative;
}

.f {
  height: 50px;
  width: 100%;
  background-color: yellow;
  overflow: hidden;
  position:relative;
}

.g {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.k {
  height: 50px;
  width: 100%;
  background-color: red;
}

.l {
  position: fixed;
}

.m {
  background-color: lime
}

<div class="a">
  <div class="f">
    <div class="g">
      <div class="k event1">
        <span>When it is working, this is clickable <br /> and alert (foo) <br /> &nbsp; </span>
        <div class="l">
          <div class="m event2">
            <span>When it is working, this is clickable <br /> and alert (bar) then alert(foo)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

using FF47, and then updating to FF47.0.1 can't reproduce this, so doesn't seem a bug to me, it doesn't even alert(bar) — dippas, Jul 01 '16 at 12:56
That's the problem. Clicking it should show to alert but none are fired — ben, Jul 02 '16 at 05:43
The first one (the red one) works indeed, but the second one (the lime one) should fire `alert` as well and it does not. Try the same in Chrome and you'll see both are alerting — ben, Jul 02 '16 at 09:05

score 1 · Accepted Answer · answered Jul 01 '16 at 12:49

1

This is indeed a regression of Firefox starting from version 46.0.1 up to version 48.0a2

For records, the original bug can be tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=1275411

answered Jul 01 '16 at 12:49

ben

3,558
1
15
28

position:fixed issue in Firefox 47 only

1 Answers1