1508490 - Transform property does not work in Firefox but does in Chrome and Safari. What to do?

Status: RESOLVED DUPLICATE of bug 1201471

(Core :: Web Painting, defect, P3)

Description

[john.morsey.007]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:63.0) Gecko/20100101 Firefox/63.0

Steps to reproduce:

I created a fiddle that you can view in modern versions of Chrome, Safari, and Firefox - 

http://jsfiddle.net/hcuaw7p3/7/.

It works in Chrome and Safari but not Firefox.  The stackoverflow solution does not work but here is a work around from nearly 4 years agao.

https://stackoverflow.com/questions/53384655/transform-property-does-not-work-in-firefox-but-does-in-chrome-and-safari-what


Actual results:

The backface is shown when it should not be.


Expected results:

The backface should have been hidden.

Comment 1

[john.morsey.007]

Please update Firefox to work consistent with Chrome and Safari.  Should not need extra code to get this functionality to work.

Comment 2

[Gingerbread Man]

:dbaron, please have a look if you can. It seems similar to dependencies of bug 968555 (bug 1185376, bug 1201471, bug 1494429).

Comment 3

[john.morsey.007]

The fix for the fiddle I posted above is setting

.card__face--front {
}

to 

.card__face--front {
  transform: rotateY(0deg);
}

However, this fix took me 2+ hours to determine, and longer to abstract out my code into a fiddle.  By making Firefox behavior consistent with Chrome and Safari it might save developers some time.

Thanks for looking at this.  Much appreciated.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

This is exactly bug 1201471 indeed. According to bug 1201471 comment 8 we match the spec (at least at the time). Has the spec changed?

Comment 5

[john.morsey.007]

The posted bug is from 3 years ago and the link or the link's hash no longer points to any particular section of the page.  I don't have time to read the spec., nor do I want to, but I think to make Firefox consistent with both Chrome and Safari, there should be an update.  

If the spec. does not necessitate this change I think it should still be done in the interest of the many developers that have to spend time to figure out why their code does not work as expected or as consistent with other major browsers.

For practical purposes, there is no time to read the spec. for every feature that is used in development.

Consistency across browsers is probably more important.  

My code already works but for future developers you might want to update.  This is an often searched item.

Comment 6

[Matt Woodrow (:mattwoodrow)]

I'm not really sure how to copy Safari/Chrome here, as their behaviour appears to be dependent on internal implementation details (that differ between browsers).

backface-visibility:hidden doesn't create a stacking context, and isn't an inherited property, so in your testcase I'd expect the backface of the "card__face card__face--front" element to be hidden, but not the backface of the img element inside it.

Chrome and Safari are both hiding the backface of the inner image, and I don't see why.

It gets extra interesting if you add a new sibling to the img, something like "<div style="transform:rotateX(2deg) perspective(1000px); background-color:blue; width:100px; height:100px;></div>"

Chrome doesn't hide the backface of this new element. I believe that's because the 3d transform promotes it to a new compositing layer, and as the element doesn't have backface-visibility:hidden (only its parent does), then it doesn't get the attribute to be hidden.

We really need to get spec clarification, since we can't easily copy chrome's compositing layer heuristics.

Comment 7

[Gingerbread Man]

Abandoning needinfo request from 11 months ago.

Comment 8

[Thomas Wisniewski [:twisniewski]]

Based on comment #4, this is a duplicate of bug 1201471, so I'm closing it as such, and moving the P3 priority and parity flags over to that bug.