移动浏览器使用Animate.css留下空白

时间:2015-09-12 05:53:22

标签: css css3 mobile safari animate.css

一直在使用Animate.css在我的网站上设置一些整页动画,但是,我发现移动浏览器似乎无法在动画结束后重新计算页面大小,通常会留下一个巨大的空白区域元素开始在屏幕上动画。

基本上,我有Animate.css动画整个页面大小的div从侧面和从底部滑入,而侧面div似乎不会导致错误,slideUp似乎留下了很多底部的空间。动画结束后,所有div都设置为display: none

这可能与我身上overflow-y: visible;有关。

我正在测试我正在测试的iPad上的问题,Chrome最终检测到新的页面大小并删除了空白(经过一段时间的延迟),而Safari似乎从来没有弄明白。

任何可能迫使移动浏览器重新计算页面大小或更具体修复的黑客攻击?

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,但我只是从侧面动画。将overflow-x: hidden;添加到主div为我修复此问题,因此您可能需要考虑不使用overflow-y: visible;不知何故。这似乎是移动浏览器的一个错误。