Click event not fired in Firefox 50

RESOLVED FIXED in Firefox 52



a year ago
a year ago


(Reporter: lorenzo.benvenuti, Assigned: mattwoodrow)



50 Branch
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox50 wontfix, firefox51- wontfix, firefox52- fixed, firefox-esr52 fixed, firefox53+ fixed, firefox54 verified)



(1 attachment)



a year ago
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Steps to reproduce:


after updating to Firefox 50 my web application started behaving in a strange way: some clicks were lost. I was able to isolate the behaviour in a simple case; consider the following code:


<div id="myButton" tabindex="0" role="button" class="v-button v-widget">
<span class="v-button-wrap">
<img class="v-icon" src="" alt="">
<span class="v-button-caption">A button</span>


document.getElementById("myButton").addEventListener("click", function(event) { alert("Hi!");});


.v-button {
  height: 150px;
  width: 150px;

.v-button {
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
.v-button-wrap {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
.v-button:active {
  opacity: 0.7;

If you try to click on the image you can see two strange behaviours:

- The image disappears (instead of becoming semi-transparent)
- The alert (opened via click event listener) is not shown

The issue disappears if one of these conditions is satisfied:

- The "transform-style" properties are not set
- The ".v-button-wrapper" "display" property is not set to "block"
- The "opacity" property is not set

The application used to work correctly in Firefox 49 and previous (and still works in Chrome, IE11 and Edge).

Actual results:

When clicking on the image, image disappears and click event is not fired

Expected results:

Image should become slightly transparent and a fire event should be triggered

Comment 1

a year ago
You can check this fiddle:

Comment 2

a year ago
Regression range:

Matt Woodrow — Bug 1283827 - Flatten transform-style:preserve-3d when combined with opacity. r=dbaron

Matt, could you check if it's normal that's the event is not fired after the spec change in bug 1283827.
Blocks: 1283827
Component: Untriaged → Layout
Flags: needinfo?(matt.woodrow)
Keywords: regression
OS: Unspecified → All
Product: Firefox → Core
Hardware: Unspecified → All
status-firefox50: --- → wontfix
status-firefox51: --- → affected
status-firefox52: --- → affected
status-firefox53: --- → affected
tracking-firefox51: --- → ?
tracking-firefox52: --- → ?
tracking-firefox53: --- → ?
Too late for 51, but we can still take patches for 52/53.
status-firefox51: affected → fix-optional
status-firefox52: affected → fix-optional
tracking-firefox51: ? → -
tracking-firefox52: ? → -
tracking-firefox53: ? → +

Comment 4

a year ago
Created attachment 8825596 [details] [diff] [review]
Update overflow areas when opacity toggles

Having the opacity property disables preserve-3d (making that change was what regressed this).

Preserve-3d frames do crazy things with overflow areas, so when we transition in/out of having opacity, we need to make sure we recompute the overflow areas.

Are you ok with reviewing this Timothy? Dbaron isn't accepting review requests at the moment.
Assignee: nobody → matt.woodrow
Flags: needinfo?(matt.woodrow)
Attachment #8825596 - Flags: review?(tnikkel)
Attachment #8825596 - Flags: review?(tnikkel) → review+

Comment 5

a year ago
Pushed by
Update the overflow areas of all descendants when we toggle opacity on a preserve-3d frame. r=tnikkel

Comment 7

a year ago
Last Resolved: a year ago
status-firefox54: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla54
Please request Aurora/Beta approval on this when you get a chance.
status-firefox51: fix-optional → wontfix
Flags: needinfo?(matt.woodrow)
Flags: in-testsuite+

Comment 9

a year ago
Comment on attachment 8825596 [details] [diff] [review]
Update overflow areas when opacity toggles

Approval Request Comment
[Feature/Bug causing the regression]: Bug 1283827
[User impact if declined]: Invalid rendering when dynamically toggling opacity in the presence of preserve-3d, relatively rare.
[Is this code covered by automated tests?]: Yes, new reftest added.
[Has the fix been verified in Nightly?]:
[Needs manual test from QE? If yes, steps to reproduce]: No
[List of other uplifts needed for the feature/fix]: Just this patch
[Is the change risky?]: No
[Why is the change risky/not risky?]: Just increases the work when we do when we detect an opacity style change. It should never be dangerous to do more than necessary.
[String changes made/needed]: None
Flags: needinfo?(matt.woodrow)
Attachment #8825596 - Flags: approval-mozilla-beta?
Attachment #8825596 - Flags: approval-mozilla-aurora?
Hi Brindusa, 
Could you help find someone to verify if this issue was fixed as expected on a latest Nightly build? Thanks!
Flags: needinfo?(brindusa.tot)
Verified as fixed on 54.0a1 20170215110151 on Ubuntu 16.04 x64, Windows 10 x64, OSX 10.10.
status-firefox54: fixed → verified
Flags: needinfo?(brindusa.tot)
Comment on attachment 8825596 [details] [diff] [review]
Update overflow areas when opacity toggles

Fix a rendering issue when dynamically toggling opacity in the presence of preserve-3d. Aurora53+.
Attachment #8825596 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Comment on attachment 8825596 [details] [diff] [review]
Update overflow areas when opacity toggles

fix opacity vs preserve-3d interaction, beta52+
Attachment #8825596 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Matt, seems this still hit conflicts in layout/reftests/transform-3d/reftest.list for aurora

could you take a look, thanks!
Flags: needinfo?(matt.woodrow)

Comment 15

a year ago
status-firefox53: affected → fixed
Flags: needinfo?(matt.woodrow)

Comment 16

a year ago
status-firefox52: fix-optional → fixed

Comment 17

a year ago
status-firefox-esr52: --- → fixed
You need to log in before you can comment on or make changes to this bug.