Jump to content
Search Community

mcarlson

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by mcarlson

    Firefox background image jumps after scale

    in GSAP

    Posted

    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. 

     

     

    Firefox background image jumps after scale

    in GSAP

    Posted

    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

×
×
  • Create New...