Question

我在iPad上使用background-size: cover来显示全屏背景图像。在.click(function(){ $(this).addClass('example') });上，div会改变其大小。首先我们得到了：

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

之后我们得到了像

这样的东西

height: 50%;
width: 50%;

然后，在另一次点击时，尺寸会变回

height: 100%;
width: 100%;

但背景不再扩展。我该如何解决这个问题？

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

适用于台式机。 Live version（包含背景图片的div名为.start-img

对于想要深入挖掘的每个人： 在click上，.second会将div.start-img添加到.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; }转换图像。所以起初它是

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

通过单击添加或删除的类具有以下属性：

height: 40%

我想问题是，背景图片与height: 100%保持一致，而不是转换回background-size: cover。对于强迫＆＃34;强大的＃34;要覆盖的背景图像（即使属性{{1}}在此过程中从未改变过）。

Answer 1

这是一个非常特殊的问题。我仍然不知道为什么，但有两个使用jquery.transit的命令用于动画元素的不透明度。停用这两行对我来说很好。

也许iPad可以通过css过渡获得有限数量的动画？

虽然我有一个脚本，我在其中创建了这样的函数：

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

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

在iPad上不起作用，而以下版本完美无缺：

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

}

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

我无法解释为什么，并将在最小化的例子中为此开启另一个讨论。

全屏背景图像与jQuery和动画

1 个答案: