Closed Bug 1435902 Opened 6 years ago Closed 6 years ago

Animations of elements that have transform-style: preserve-3d are even more broken in Firefox 58

Categories

(Firefox :: Untriaged, defect)

Product:
Firefox
Component:
Untriaged
Version:
58 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1425213

People

(Reporter: nrajbhan, Unassigned)

Details

Attachments

(2 files)

FirefoxAnimationBug.html
838 bytes, text/html
Details
loader.html
243 bytes, text/html
Details 
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Steps to reproduce:

CSS translate animations are not working in ads on Firefox 58 when transform-style: preserve-3d is set. This might be related to bug https://bugzilla.mozilla.org/show_bug.cgi?id=1431893 but I think it's more common than the overflow-hidden case because ads are served within iframes which clip the ad content by default. Animations of content that slide into view no longer work in Firefox 58.

Create a file named FirefoxAnimationBug.html with the following text:
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">    
    div {
      position: absolute;
      background-color: green;
      left: 0px;
      top: 50px;
      height: 100px;
      width: 100px;
      transform-style: preserve-3d;
      transform: translate3d(-100px, 0px, 0px);

      animation: slide-in 1s linear 0s 1 normal forwards;
    }
    @keyframes slide-in {
      0% {
        transform: translate3d(-100px, 0px, 0px);
        animation-timing-function: linear;
      }
      100% {
        transform: translate3d(200px, 00px, 0px);
        animation-timing-function: linear;
      }
    }
  </style>
</head>

<body>A green DIV should slide into view.
  <div></div>
</body>

</html>


Create another file named loader.html with the following text:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<iframe src="FirefoxAnimationBug.html" style="border: 1px solid black;" width="300" height="250"></iframe>

</body>
</html>

Open loader.html in Chrome and note that a green DIV animates across the iframe.
Open loader.html in Firefox and note that the green DIV just shows up at the right-side of the iframe without any animation.


Actual results:

Animations of content that slide into view no longer work in Firefox 58.


Expected results:

Animations of content that slide into view should continue working like in previous versions of Firefox. They do work in the release version of all major browsers.
I haven't tried the test case in comment 0, but it looks like a dup of bug 1424506?
Attached file loader.html — 

    
    

    
  
It seems to be fixed in beta 59.

@reporter,
Could you test this with beta 59[1]?

[1]
https://www.mozilla.org/en-US/firefox/channel/desktop/

    
  
Flags: needinfo?(nrajbhan)

    
    

    
  
(In reply to Alice0775 White from comment #4)
> It seems to be fixed in beta 59.

Thank you Alice!  Then I think it's a dup of bug 1425213.

    
    

    
  
(In reply to Hiroyuki Ikezoe (:hiro) from comment #5)
> (In reply to Alice0775 White from comment #4)
> > It seems to be fixed in beta 59.
> 
> Thank you Alice!  Then I think it's a dup of bug 1425213.

yep, I confirmed.
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE

    
    

    
  
Thanks! This is indeed fixed in Firefox 59 beta. Unfortunately, the other bug with animations not playing correctly when setting 'overflow: hidden' still happens in Firefox 59 beta - https://bugzilla.mozilla.org/show_bug.cgi?id=1431893. Do you know when that will be fixed? A lot of our customers are running into these issues.
Flags: needinfo?(nrajbhan)

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: