【问题标题】:Mobile browsers leaving whitespace with Animate.css移动浏览器使用 Animate.css 留下空白
【发布时间】:2015-12-08 17:37:28
【问题描述】:

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

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

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

我确实在我正在测试的 iPad 上看到了问题,Chrome 最终会检测到新的页面大小并删除空格(经过一段时间的延迟),而 Safari 似乎永远无法解决。

是否有任何可能迫使移动浏览器重新计算页面大小或更具体的修复方法的黑客想法?

【问题讨论】:

  • 你有想过这个吗?
  • 我想我最终完全重做了我的动画(我想我最终使用了 Velocity.js),并删除了许多复杂的计算,如阴影以加快速度。所以我认为我从未解决过这个特定问题。

标签: css mobile safari animate.css


【解决方案1】:

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

【讨论】:

  • 这个答案太笼统了,没有任何价值。
  • 我认为这适用于overflow-x隐藏,但我希望人们能够向下滚动,所以overflow-y需要可见。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多