Html 定位固定和webkit溢出触摸问题ios 7_Html_Css_Ios7

Html 定位固定和webkit溢出触摸问题ios 7

html css ios7

Html 定位固定和webkit溢出触摸问题ios 7,html,css,ios7,Html,Css,Ios7,我有一个反应灵敏的网站，它的菜单栏是一个边栏（像FB应用程序），通过position:fixed固定到右角。到目前为止，除了iOS7与-webkit-overflow-scrolling:touch结合使用外，它工作得很好。固定元素不会停留在其位置，而且在滚动完成后会跳到固定位置你们有人有什么建议吗谢谢我一整天都在为同样的问题苦苦挣扎，结论是，是的，当你在苹果屏幕设备中用“-webkit overflow scrolling:touch”将一个元素放置在一个容器中“fixed”时，会出现一个

我有一个反应灵敏的网站，它的菜单栏是一个边栏（像FB应用程序），通过

position:fixed固定到右角。到目前为止，除了iOS7与-webkit-overflow-scrolling:touch结合使用外，它工作得很好。固定元素不会停留在其位置，而且在滚动完成后会跳到固定位置
你们有人有什么建议吗
谢谢
我一整天都在为同样的问题苦苦挣扎，结论是，是的，当你在苹果屏幕设备中用“-webkit overflow scrolling:touch”将一个元素放置在一个容器中“fixed”时，会出现一个bug。我找不到任何工作-webkit转换：translate3d（0,0,0）'nor'-webkit背面可见性：隐藏'
最后，我重新组装了html结构，使固定元素不在可滚动容器中，而是在上层。如果“body”是可滚动的容器，可能并不理想，但希望它能为可能的解决方案提供一些帮助
通过一个简化的示例对其进行扩展：
<body>
    <sidebar></sidebar>
    <div id="content-wrap">
        <article></article>
        <footer></footer>
    </div>
</body>



CSS看起来像：


侧栏{
位置：固定；
}
#内容包装{
-webkit溢出滚动：触摸；
}

基本上，底线是，不要将存在于滚动触控容器中的元素定位为固定元素。如果你不想处理这个iOS奇怪的问题，你就必须把它拿出来。
我可以通过动态地将-webkit溢出滚动
样式更改为自动
来解决这个问题，只要触发一个按钮来显示位置：fixed
div（在滚动容器内）
我只需添加不滚动
类
.container{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
    -webkit-overflow-scrolling: auto; /* The fix */
}

一旦position:fixed
div被隐藏（在我的例子中，当用户单击弹出模式上的“取消”按钮时），我会动态删除dont scroll
类以再次启用平滑滚动。
作为随机猜测，您是否尝试添加-webkit backface visibility:hidden
，修复了最近的某个位置：已修复我在webkit中遇到的问题。@谢谢您的尝试。我没有访问iOS 7 atm的权限，但稍后会尝试！您是否有任何代码与您的答案一起作为用户提问的示例？