background size does not work properly in ios/ipads

[frankofamerica]

Using gsap tweenmax (lite or timelinelite) the backgroundSize works properly on browsers but does not on ios/ipads

Take a look at this on browser and for the error on iPad. Any help would be much appreciated.

See the Pen AigpI by jonathan (@jonathan) on CodePen

[RedGlove]

I don't really know what's wrong with using backgroundSize. It may not be supported on Safari for the ios you are testing on.

You can achieve the same effect that works on ios by adding your image in another container with overflow set to hidden,

then position your image at top 0 and left 0, and then in your TweenMax increase width and height to 125% which gives the

same effect.

 

Take a look at this codepen:

See the Pen EygZLX?editors=1111 by RedGlove (@RedGlove) on CodePen

[Jonathan]

background-size is supported on Safari.. you might need to also use the vendor prefix for background-size for Safari 3.0 and below:

"-webkit-background-size": "+=25% +=25%",
backgroundSize: "+=25% +=25%",

Safari has the following limitations and known issues:

1. Safari (OS X and iOS) and Chrome do not support background-size: 100% <height>px; in combination with SVG images, it leaves them at the original size while other browsers stretch the vector image correctly while leaving the height at the specified number of pixels.
2. iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;
3. iOS Safari has buggy behavior with background-size: cover; on a page's body.

For a kens burns effect i would recommend just using transform scale instead, since even width and height can be choppy, especially in Firefox and Chrome when animating up to higher width and height values, even with autoRound: false on Windows 7 and 10. And transform scale can take advantage of using the GPU to animate smoother. Just make sure when using scale that the image is already at its largest size so you can work around a webkit anti-alias bug that makes images and text blurry when scaled above a scale factor of 1.

 

Resource:

background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

 

[GreenSock]

It looks like the problem was that Safari reports the computed style in a funky way, omitting the 2nd value when it matches the first. So if you set backgroundSize to "100% 100%" and then ask the browser for the computed value, it'll say it's simply "100%" (no 2nd value). GSAP was defaulting the 2nd value to 0. I've updated the next version of GSAP so that it'll just copy the first value in this case. You can preview the uncompressed TweenMax with this in place at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - does that work better for you?