ios - Fullscreen background-image with jQuery and Animation -
i using background-size: cover
on ipad display fullscreen background-image. on .click(function(){ $(this).addclass('example') });
div changes size. first got:
position: absolute; height: 100%; width: 100%;
and afterwards got like
height: 50%; width: 50%;
then, on click sizes changes to
height: 100%; width: 100%;
but background not scale anymore. how can fix this?
you can see video error ipad right here.
works fine on desktops. live version (div containing background-image named .start-img
for wants dig deeper: on click
class .second
added div.start-img
transforms image. @ first its
.start-img { background-size: cover; background-repeat: no-repeat; background-position: bottom left; z-index: 1; transition: 0.5s ease-in-out; height: 100%; width: 100%; position: absolute; }
the class added or removed clicking has following attributes:
.start-img.second { width: 100%; height: 40%; }
i guess problem is, background-image stays height: 40%
instead of transforming height: 100%
. great "force" background-image scale again cover (even if attribute background-size: cover
has never changed during process).
it quite special problem. still not know why, there 2 commands using jquery.transit used animate opacity of element. deactivating these 2 lines worked fine me.
maybe ipad got limited amount of animations can take via css transitions?
although had script created function this:
example = function(){ /* other animations , following */ $('.start-img').addclass('second'); } $('#example').click(example);
which not work on ipad, while following version works perfect:
example = function(){ /* other animations , following */ } $('#example').click(function(){ /* other animations , following */ $('.start-img').addclass('second'); });
i cannot explain why , open discussion in minimized example.
Comments
Post a Comment