Fullscreen background-image with jQuery and Animation

Question

I am using background-size: cover on an iPad to display a fullscreen background-image. On .click(function(){ $(this).addClass('example') }); the div changes its size. So first we got:

position: absolute;
height: 100%;
width: 100%;

and afterwards we got something like

height: 50%;
width: 50%;

Then, on another click the sizes changes back to

height: 100%;
width: 100%;

But the background does not scale anymore. How can I fix this?

You can see a video with the error from an ipad right here.

Works fine on desktops. Live version (div containing the background-image is named .start-img

For everyone who wants to dig deeper: On click a class .second is added to the div.start-img which transforms the image. So at first its

.start-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  height: 100%;
  width: 100%;
  position: absolute; 
}

The class added or removed by clicking has the following attributes:

.start-img.second {
    width: 100%;
    height: 40%;
}

I guess the problem is, that the background-image stays with the height: 40% instead of transforming back to height: 100% . It would be great to "force" the background-image to scale again to cover (even if the attribute background-size: cover has never changed during the process).

Answer 1

It was quite a special problem. I still do not know why, but there were two commands using jquery.transit used to animate the opacity of an element. Deactivating these two lines worked fine for me.

Maybe an iPad got a limited amount of animations it can take via css transitions?

Although I had a script where I created a function like this:

example = function(){
   /* other animations to do and the following */
   $('.start-img').addClass('second');
}

$('#example').click(example);

which does not work on an iPad, while the following version works perfect:

example = function(){
   /* other animations to do and the following */

}

$('#example').click(function(){
   /* other animations to do and the following */
   $('.start-img').addClass('second');
});

I cannot explain why and will open another discussion for that in a minimized example.