1319825 - Click event not fired in Firefox 50

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[lorenzo.benvenuti]

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

Comment 1

[lorenzo.benvenuti]

You can check this fiddle:

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

Comment 2

[Loic]

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.

Comment 3

[Liz Henry (:lizzard) (relman/hg->git project)]

Too late for 51, but we can still take patches for 52/53.

Comment 4

[Matt Woodrow (:mattwoodrow)]

Attachment: 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.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
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 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/3d13ed042963
followup, fix rebasing oops

Comment 7

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/38a92c2df699
https://hg.mozilla.org/mozilla-central/rev/3d13ed042963

Comment 8

[Ryan VanderMeulen [:RyanVM]]

Please request Aurora/Beta approval on this when you get a chance.

Comment 9

[Matt Woodrow (:mattwoodrow)]

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

Comment 10

[Gerry Chang [:gchang]]

Hi Brindusa, 
Could you help find someone to verify if this issue was fixed as expected on a latest Nightly build? Thanks!

Comment 11

[Adrian Florinescu [:aflorinescu]]

Verified as fixed on 54.0a1 20170215110151 on Ubuntu 16.04 x64, Windows 10 x64, OSX 10.10.

Comment 12

[Gerry Chang [:gchang]]

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+.

Comment 13

[Julien Cristau [:jcristau]]

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

fix opacity vs preserve-3d interaction, beta52+

Comment 14

[Carsten Book [:Tomcat]]

Matt, seems this still hit conflicts in layout/reftests/transform-3d/reftest.list for aurora

could you take a look, thanks!

Comment 15

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/3a3e07e22ea8

Comment 16

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/55e1886a334b

Comment 17

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-esr52/rev/55e1886a334b