Closed Bug 1319555 Opened 3 years ago Closed 3 years ago

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

Categories

(Core :: Layout, defect)

50 Branch
defect
Not set

Tracking

()

RESOLVED WONTFIX
Tracking Status
firefox50 - wontfix
firefox51 + wontfix
firefox52 + wontfix
firefox53 + wontfix

People

(Reporter: robervillar, Unassigned)

References

Details

(Keywords: regression, Whiteboard: [parity-edge])

Attachments

(3 files)

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
[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
Blocks: 1278136
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Flags: needinfo?(hiikezoe)
Keywords: regression
Product: Firefox → Core
Whiteboard: [parity-edge]
Attached file reduced html
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?
Flags: needinfo?(hiikezoe)
Alice, any hint to understand this problem?
Flags: needinfo?(alice0775)
(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.
Flags: needinfo?(alice0775)
Reproduced on Windows10 and Ubuntu16.04. (not tested on Mac)
OS: Unspecified → All
I think this may be the expected behavior.  The presence of a completed (filling) animation on 'opacity' is breaking the 'preserve-3d'.
Hardware: Unspecified → All
Summary: TROUBLE WITH RENDER LAYERS ANIMATIONS IN FIREFOX 50 → opacity animation breaks preserve-3d effect even after animation has completed
The site should fix this by either:
 (a) removing the animation of opacity, or
 (b) animating opacity on .stage instead of .layer
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.
See Also: → 1283827
(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 ?
Track 51+/52+/53+ as css animation rendering issue.
(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).
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → WONTFIX
Per comment #10 & #12, dev suggested the site should fix the issue. Mark 50/51 as won't fix.
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.
You need to log in before you can comment on or make changes to this bug.