我们在 body 和可滚动元素上将 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 如何扩展站点的宽度,即使我们固定了正文宽度。