移动Safari中忽略了溢出-x值

Question

我们将overflow-x值设置为隐藏在正文和可滚动元素上,但移动版Safari会忽略这些值.在桌面上,溢出值工作正常.

相关代码:

body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }

.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }

#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }

catalog_page位于视口外部,只有在有人做手势后才会滑入视图.

重现:

1)在iPhone(而不是iPad)上访问www.tekiki.com.滚动到右侧,即使我们修正了车身宽度,您也会看到catalog_page如何扩展站点的宽度.

Answer 1

添加html { overflow: hidden; }到您的CSS,它应该修复它.