1319555 - opacity animation breaks preserve-3d effect even after animation has completed

Status: RESOLVED WONTFIX

(Core :: Layout, defect)

Description

[Rober Villar]

Attachment: FireShot Screen Capture #009 - 'SOFTWARE RVG DESIGNS' - download_mozilla_softwarervgdesigns_com.png

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161104212021

Steps to reproduce:

THE LAST VERSION  LAUNCHED AT BROWSER FIREFOX 50 HAVE A TROUBLE FOR DEVELOPERS OF  CSS ANIMATIONS CODE . THIS BROWSER NOT UNDERSTAND THE LAYERS OF ANIMATION , AND THEN , A GREAT CSS CODE ANIMATION I HAVE DESIGNED WITH MOZILLA AND FIREFOX DEVELOPER EDITION THEME, NOT RENDER WELL , NOT GET 3D EFFECT . YOU CAN SEE THIS ANIMATION IN DEMOS OF OPEN WEB TECHNOLOGIES , ARTICLE POSTED ON MDN. I HOPE IN FUTURE VERSIONS THIS PROBLEM NOT BE CONTINUED, BECAUSE IN THE VERSION 49 OF FIREFOX MY ANIMATION WAS WONDERFULL. 


Actual results:

THIS ANIMATION IN LAST VERSION OF FIREFOX NOT RENDER WELL, I THINK THE NEW BROWSER NOT UNDERSTAND THE LAYERS OF THIS ANIMATION, NO GET 3D EFFECT AS ON THE BEFORE BROWSER MOZILLA FIREFOX 49 VERSION. I HOPE THE MOZILLA ENGINEERS SOLVE THIS PROBLEM FOR FUTURE VERSIONS.



Expected results:

I HOPE THE MOZILLA ENGINEERS SOLVE THIS PROBLEM FOR FUTURE VERSIONS.
HERE ARE THE LINKS OF THIS ANIMATIONS TO CHECK THIS PROBLEM. AND REMEMBER...FIREFOX... CONSTANTLY EVOLVING.

http://codepen.io/SoftwareRVG/pen/OXkOWj/

http://codepen.io/SoftwareRVG/pen/JRJZVW

https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies

Comment 1

[Alice0775 White]

[Tracking Requested - why for this release]: layout broken

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=0aa6ee3eb1d8cb7380397b8c28abbabc122fa210&tochange=18cbc19266b4e6f60a35b21d748dbb88c3f03d64

Regressed by: Bug 1278136

Comment 2

[Alice0775 White]

Attachment: reduced html

Comment 3

[Hiroyuki Ikezoe (:hiro)]

I am sorry, I don't really understand what the problem is.  I can see a swinging firefox logo in the second code pen in comment 0 on nightly.  Also it seems to me that it is the same result on chrome.  Is this window specific?

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Alice, any hint to understand this problem?

Comment 5

[Alice0775 White]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)
> Alice, any hint to understand this problem?

You should try Edge and Firefox48 and then Nightly53.a1.

The logo is 3D on Edge and Firefox48. But, 2D on Nightly53.a1.

Comment 6

[Alice0775 White]

Reproduced on Windows10 and Ubuntu16.04. (not tested on Mac)

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I think this may be the expected behavior.  The presence of a completed (filling) animation on 'opacity' is breaking the 'preserve-3d'.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The site should fix this by either:
 (a) removing the animation of opacity, or
 (b) animating opacity on .stage instead of .layer

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Thank you, dbaron. Now I understand this bug.
There was a spec change that preserve-3d element is flatten if the element has opacity < 1.  There is no description about animations.  We might unflatten while the animating opacity == 1 (with fill:forwards) but I think it will unwanted result too.

Comment 10

[Astley Chen (inactive)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #9)
> Thank you, dbaron. Now I understand this bug.
> There was a spec change that preserve-3d element is flatten if the element
> has opacity < 1.  There is no description about animations.  We might
> unflatten while the animating opacity == 1 (with fill:forwards) but I think
> it will unwanted result too.

Agree with that. If this is what spec defined, then I am inclined to follow comment 8 suggestion to let site developers fix it. what's is your thought ?

Comment 11

[Gerry Chang [:gchang]]

Track 51+/52+/53+ as css animation rendering issue.

Comment 12

[Hiroyuki Ikezoe (:hiro)]

(In reply to Astley Chen [:astley] (UTC+8) from comment #10)
> (In reply to Hiroyuki Ikezoe (:hiro) from comment #9)
> > Thank you, dbaron. Now I understand this bug.
> > There was a spec change that preserve-3d element is flatten if the element
> > has opacity < 1.  There is no description about animations.  We might
> > unflatten while the animating opacity == 1 (with fill:forwards) but I think
> > it will unwanted result too.
> 
> Agree with that. If this is what spec defined, then I am inclined to follow
> comment 8 suggestion to let site developers fix it. what's is your thought ?

Yes, we can close this bug.

I did receive an e-mail and sent him back to an information there is a long discussion about this issue (and including proposals to avoid this, I've not followed the discussion though).

Comment 13

[Gerry Chang [:gchang]]

Per comment #10 & #12, dev suggested the site should fix the issue. Mark 50/51 as won't fix.

Comment 14

[Marcia Knous [:marcia]]

Updating 52/53 flags for consistency.

Comment 15

[Rober Villar]

Attachment: FireShot Screen Capture #006 - 'SOFTWARE RVG DESIGNS' - download_mozilla_softwarervgdesigns_com.png

Comment 16

[Rober Villar]

Do you see it like this, in 3D And the orange border, or do you see it flattened?

Thanks Hiikezoe, but the problem did not happen with the previous Firefox browser version 49.0. I think the new version 50 does not support css animations with layers. The result is now unsatisfactory. With the mozilla browser 49, the previous version, the display of this animation in the mozilla browser was incredible. Other browsers like the chrome or edge do not offer the same result, the best visualization of the animation was done in Firefox, but now it is unacceptable. I hope in the next version or beta tester, mozilla solved this problem.

-------------------------------------------------------------------------------------------------------

Thanks Alice, but the problem did not happen with the previous Firefox browser version 49.0. I think the new version 50 does not support css animations with layers. The result is now unsatisfactory. With the mozilla browser 49, the previous version, the display of this animation in the mozilla browser was incredible. Other browsers like the chrome or edge do not offer the same result, the best visualization of the animation was done in Firefox, but now it is unacceptable. I hope in the next version or beta tester, mozilla solved this problem.

-------------------------------------------------------------------------------------------------------

Thanks David , but the trouble do not happened with before browser firefox version 49.0. I think this release not support animations css with layers. The result is now poor. With browser mozilla 49, the  before  version, the render of this animation in mozilla browser was wonderfull. Other browsers as chrome or edge not give us the same result , The better animation render was in firefox but now is unacceptable. I hope in the next release or beta tester mozilla solved this problem.