Click event not fired in Firefox 50

RESOLVED FIXED in Firefox 52

Status

()

Core
Layout
RESOLVED FIXED
a year ago
a year ago

People

(Reporter: lorenzo.benvenuti, Assigned: mattwoodrow)

Tracking

({regression})

50 Branch
mozilla54
regression
Points:
---
Bug Flags:
in-testsuite +

Firefox Tracking Flags

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

Details

Attachments

(1 attachment)

(Reporter)

Description

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:

Hi,

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:

HTML

<div id="myButton" tabindex="0" role="button" class="v-button v-widget">
<span class="v-button-wrap">
<img class="v-icon" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRWnTfnFJJkFy1YBmaZNX4jp3emkdGD0XJdT7A4sE246CJ1kBRs" alt="">
<span class="v-button-caption">A button</span>
</span>
</div>

Javascript: 

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

CSS:

.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
(Reporter)

Comment 1

a year ago
You can check this fiddle:

https://jsfiddle.net/tabhtu61/3/

Comment 2

a year ago
Regression range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=067521
ccd17907843e1db644ca0f02a1f5a6520a&tochange=eac0c056235ee1174fc092fe159d2d571033
1fbd

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: ? → +
(Assignee)

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 mwoodrow@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/38a92c2df699
Update the overflow areas of all descendants when we toggle opacity on a preserve-3d frame. r=tnikkel

Comment 7

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/38a92c2df699
https://hg.mozilla.org/mozilla-central/rev/3d13ed042963
Status: UNCONFIRMED → RESOLVED
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+
(Assignee)

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
bugherderuplift
https://hg.mozilla.org/releases/mozilla-aurora/rev/3a3e07e22ea8
status-firefox53: affected → fixed
Flags: needinfo?(matt.woodrow)

Comment 16

a year ago
bugherderuplift
https://hg.mozilla.org/releases/mozilla-beta/rev/55e1886a334b
status-firefox52: fix-optional → fixed

Comment 17

a year ago
bugherderuplift
https://hg.mozilla.org/releases/mozilla-esr52/rev/55e1886a334b
status-firefox-esr52: --- → fixed
You need to log in before you can comment on or make changes to this bug.