CSS3 Animate It 更改移动设备上某些元素的位置和宽度属性

Question

我的一些博客文章页面有这个奇怪的问题，例如。 http://www.stgobsas.dk/blog/buenosaires/index.html

问题似乎出在我的 CSS3 Animate It 插件上。在任何宽度的桌面浏览器中查看时，它似乎工作得很好（我已经测试到 400 像素）。但是当我在移动设备上查看它时（以及使用设备模式通过 Chrome 的开发人员工具），它会将我的 <header> 和 .header-image 的位置属性从固定更改为“不固定”，它使我的标题/菜单栏占用更多的水平空间，例如。 760 像素，其中 .main-wrapper 占用了 375 像素（这适用于 iPhone 6）。我真的不明白为什么这个问题只出现在移动浏览器上，而不是在桌面浏览器上，即使窗口宽度相同。

看看我的 script.js 文件的底部。倒数第二个代码块用于我的博客页面，它会导致问题。最后一个代码块用于我的首页，它会导致类似的问题，但是标题/菜单栏的宽度会在动画继续时缩小，然后再次正常。

更新：如果您通过 iPad 大小（或任何大于 700 像素）的 Chrome 中的设备模式查看它，您会看到同样的问题，但是当您一直向下滚动到底部时，其中最后一个动画正在等待用户滚动到视图中，然后这些动画结束后问题就消失了。然后一切又好了。所以肯定是CSS3 Animate It插件的问题。但是为什么会这样呢？

我希望有人能找出问题所在！

Answer 1

经过初步分析，似乎是由以下原因引起的：

<img src="buenosairescover.jpg" class="fullsize" height="1200" witdh="1600">

删除width="1600"和height="1200"

以及带有“details-container”类的 div 的内容。

如果您删除该 div 和图像的宽度，问题就会消失。 这是第一个有趣的曲目！