overflow-x 旋转后在 Safari 上不起作用

Question

我正在构建一个网站，如果内容大于屏幕，我需要某个 div 在溢出时水平滚动。好的，这很简单 - 它适用于所有浏览器，但在 Safari 上无法完美运行：

场景： 在 iPad 或 iPhone 上以 potrait 加载页面。可滚动 div 中的内容比屏幕大。卷轴工作正常。现在我将屏幕旋转为横向，内容现在比屏幕小，因此没有滚动条。我旋转回 potrait，出现滚动条，但滚动条不起作用。如果我然后刷新页面，滚动再次起作用。

问题重复： 这个场景可以用这个 fiddle 来复制：http://jsfiddle.net/v7wvbupd/2/。如果您使用 Android 产品访问此 fiddle，它在每次旋转时都能完美运行。如果你对 Apple 产品做同样的事情，你会遇到这个错误。

滚动 - 带旋转 - 在 Safari 以外的所有其他移动浏览器上都可以正常工作。

我一直在尝试其他帖子和其他网站上的一些东西，但没有成功。

我试过但没用的：

设置 body 的相对位置。
添加以下内容：html, body {overflow-x: hidden;}.
使用：-webkit-overflow-scrolling:touch; 可滚动 div。
将 !important 添加到 -webkit-overflow-scrolling:touch; 和 overflow-x: auto 以防止它在旋转时被覆盖。

我也一直在研究一些 js 修复，例如在属性上添加超时，但仍然没有结果：

<script>
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
</script>

我遇到的大多数帖子都是滚动根本不起作用的问题。在我的情况下，它一直有效，直到我从风景旋转到肖像。

我的结构（简体）：

<html>
 <body>
  <div id="header" class="col-md-12"></div>
  <div class="scrollableDiv">
  <div id="footer" class="col-md-12"></div>
 </body>
</html>

我现在的CSS:

html {
overflow-y: scroll;
height: 100%;
width:100%;
}

body {
padding-top: 10px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}

.scrollableDiv {
overflow-x: auto !important;
width: 800px;
overflow-y: hidden;
padding-bottom: 55px;
-webkit-overflow-scrolling: touch !important;
}

.col-md-12{
width: 100%;
}

编辑

我的网站使用 Angularjs 作为解决方案的一部分。我只是测试了将它包装在一些 js 中是否是问题所在，但这也与它无关。好像只有 Safari 的通病？

Answer 1

我以前在使用 Safari 时遇到过这个问题。像溢出这样简单的事情可能会变得复杂。

我建议你使用iScroll。对于这种情况，绝对是正确的解决方案。 http://cubiq.org/iscroll-5

overflow-x 旋转后在 Safari 上不起作用

overflow-x doesn't work on Safari after rotation

html

css

safari

touch

ipad