Jump to content
Search Community

Firefox background image jumps after scale

hanslibuzli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all

 

I have a unusual bug in Firefox (45.0.1) and was wondering if any of you might have a idea or helpful pointer.

 

The problem is fairly simple. I would like to scale a div which has a background image set to cover, unfortunately in Firefox after the tween you see a jump of the background image. I can fix the jump by giving the div a fixed pixel width however I would like to keep it percentage based.

 

Thanks for your help!

See the Pen zqPOJb by anon (@anon) on CodePen

Link to comment
Share on other sites

I think in my 40.x.x Firefox there was no problem but after getting the latest version I saw what you mean. I changed a bit so the width was set in pixels but I still get some weird moves sometimes in Firefox. Hard to see but sometimes it seems it moves one pixel and than one back.

 

So also tried if force3D:true or autoRound:false helped but no luck so far. If it's just the latest version of FireFox I'm not sure if you should put much energy into it.

 

My thingie: 

See the Pen oxoNGB by OzBoz (@OzBoz) on CodePen

Link to comment
Share on other sites

I think in my 40.x.x Firefox there was no problem but after getting the latest version I saw what you mean. I changed a bit so the width was set in pixels but I still get some weird moves sometimes in Firefox. Hard to see but sometimes it seems it moves one pixel and than one back.

 

So also tried if force3D:true or autoRound:false helped but no luck so far. If it's just the latest version of FireFox I'm not sure if you should put much energy into it.

 

My thingie: 

See the Pen oxoNGB by OzBoz (@OzBoz) on CodePen

Thanks for your investigations OzBoz - it's really a strange bug!

Link to comment
Share on other sites

I am on Windows 7 and Windows 10 using Firefox 40.* and I do not see that jump towards the end.

 

I believe this has to do with the image not being fully loaded before the animation runs. It is always best practice when animating images. To run your animation only after the image is loaded. ;)

 

So you since you are already using jQuery in your code example, you can do something like this:

// only run when DOM is ready
$(document).ready(function() {

   // only run after all images, links, and css has loaded
   $(window).on("load", function(){

         // Use GSAP to set your CSS properties instead of jQuery css() method
         TweenMax.set(".band",{
              width: $(window).width(),
              height: $(window).height()
         })
               
         TweenMax.set(".band", {
            scale : 1
         });

         TweenMax.to(".band", 1, {
            scale : 1.5 
            rotation: 0.01 
         });

   });
});

Hope this helps! :)

  • Like 2
Link to comment
Share on other sites

I am on Windows 7 and Windows 10 using Firefox 40.* and I do not see that jump towards the end.

 

'Jump' sounds pretty heavy but it's only like one pixel. And since it zooms pretty hard to see. I can imagine it is annoying though when you notice it. It just shifts a pixel or so. Thought it might be caused by rounding number or so but didn't found a working cure.

Link to comment
Share on other sites

I am on Windows 7 and Windows 10 using Firefox 40.* and I do not see that jump towards the end.

 

I believe this has to do with the image not being fully loaded before the animation runs. It is always best practice when animating images. To run your animation only after the image is loaded. ;)

 

So you since you are already using jQuery in your code example, you can do something like this:

// only run when DOM is ready
$(document).ready(function() {

   // only run after all images, links, and css has loaded
   $(window).on("load", function(){

         // Use GSAP to set your CSS properties instead of jQuery css() method
         TweenMax.set(".band",{
              width: $(window).width(),
              height: $(window).height()
         })
               
         TweenMax.set(".band", {
            scale : 1
         });

         TweenMax.to(".band", 1, {
            scale : 1.5 
            rotation: 0.01 
         });

   });
});

Hope this helps! :)

Thanks for your investigation! Giving the image a fixed width definitely helped solve the problem :)

Link to comment
Share on other sites

'Jump' sounds pretty heavy but it's only like one pixel. And since it zooms pretty hard to see. I can imagine it is annoying though when you notice it. It just shifts a pixel or so. Thought it might be caused by rounding number or so but didn't found a working cure.

Unfortunately it's more then 1px on my siede, in fact almost a half of the screen jump  :(

Link to comment
Share on other sites

Hello hanslibuzli,

 

This is not a GSAP issue or bug.. but due to CSS properties that are missing.

 

If your seeing a screen jump make sure you are using css position:absolute on your .band child that your animating. Since right now your animating .band which has a css position: static, which is the default and will cause that jump due to animating in the document flow.

 

A rule of thumb to follow is always either add position: absolute or relative. With position absolute being better since it is outside of the document flow.

 

Since position relative is still inside the document flow. And position:absolute brings the element outside the flow if the document, so it doesn't affect the elements around it causing your jump.

 

Also add css overflow: hidden to your body tag so when your element scales passed the viewport, your scrollbars will appear causing the whole page to jump due to the addition of the scrollbars. If you dont add overflow hidden then give your .wrapper container a height.

  • Like 1
Link to comment
Share on other sites

Hello hanslibuzli,

 

This is not a GSAP issue or bug.. but due to CSS properties that are missing.

 

If your seeing a screen jump make sure you are using css position:absolute on your .band child that your animating. Since right now your animating .band which has a css position: static, which is the default and will cause that jump due to animating in the document flow.

 

A rule of thumb to follow is always either add position: absolute or relative. With position absolute being better since it is outside of the document flow.

 

Since position relative is still inside the document flow. And position:absolute brings the element outside the flow if the document, so it doesn't affect the elements around it causing your jump.

 

Also add css overflow: hidden to your body tag so when your element scales passed the viewport, your scrollbars will appear causing the whole page to jump due to the addition of the scrollbars. If you dont add overflow hidden then give your .wrapper container a height.

Hi Jonathan

 

Thanks you for taking your time to investigate into this strange issue. 

 

I've tried all your suggestions and forked the original CodePen project (

See the Pen oxEZXz by anon (@anon) on CodePen

) but unfortunately I still have a massive jump?! I start to believe its a FF bug on mac..

Link to comment
Share on other sites

  • 1 month later...

I am encountering this as well. Yes, it appears to be a FF bug on Mac only. I have a div with background image set to background-size:cover. Same basic layout and css as the example from hanslibuzli. While the scale animation is running, the image expands outside of its 100% width. After the scale animation is complete, the size is correct. It's only while the animation is in progress that the size distortion is happening. And it only happens with background-size:cover as far as I have been able to tell. No issue with background-size:contain for example. I believe this is a Firefox bug with background-size:cover.

 

Here's one additional thing I have found: in my case, the problem only happens on a Retina screen. If I hook up an external non-Retina (1:1 pixel ratio) screen to a Mac and move the FF browser over to that screen, the background image animates scale properly throughout the animation. But on a Retina screen (FF only), the background image is mis-sized during the animation. Possibly it happens with similar dppx/pixel-ratio screens as well, but I've only tried Retina. I have not found any workaround yet and this really seems to be a FF bug (not GSAP bug), but I wanted to add this Retina fact to the topic in case it triggers any ideas for workarounds. Again, not a GSAP bug so no expectation for a GSAP fix. But if anyone has ideas for workaround, that would be greatly appreciated. Thanks for reading.

 

Repro'd on:

OS X 10.10.5 (Yosemite) with Firefox 46.0.1

OS X 10.11.4 (El Capitan) with Firefox 46.0.1

Link to comment
Share on other sites

Thanks for the reply. Here is an updated codepen.

 

See the Pen oLgyza by mcarlson (@mcarlson) on CodePen

 

The problem still repros with background-size: 100% 100%. (Also, this skews the image.)

 

I think Firefox must not be calculating percentage based background sizes until after it repaints. If the size of the element is set in pixels rather than % or vw, the problem does not exist. 

 

 

Link to comment
Share on other sites

There are other ways to scale a background image without using background-size for FF on Mac.

 

Make sure you submit your issue with Mozilla Bugzilla. Because if they cannot replicate it, then they can't try to fix what your seeing for FF on Mac. There have been similar css background-size cover bugs for Firefox on OSX but those were marked as invalid since they could not replicate the issue.

 

:)

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...