position fixed 在ios上滚动不固定问题

今天项目上用position: fixed时，谷歌浏览器没有问题，但是到ios上就出现了滚动时position: fixed跟动着滚动的问题。怎么解决呢

在position: fixed元素上添加下面css样式即可。

transform: translate3d(0,0,0);

主要是参照下面网址解决了这个问题

https://muffinman.io/ios-safari-scroll-position-fixed/

如果是用cordova的话，config.xml加入如下配置

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

但是在一些比较老的设备上还是不好使，最终解决办法就是用 position: absolute 替换 fixed

position fixed 在ios上滚动不固定问题相关推荐

关于固定定位position: fixed；和横向滚动overflow-x: scroll；无法同时使用的问题
在做项目时遇到一个功能是要把某个盒子固定在底部,并且是要横向滑动的,发现position: fixed;和overflow-x: scroll;同时使用无效,现记录一下解决方法 <style&g ...
实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
微信小程序上下固定，中间滚动，使用position:fixed遮挡正文
问题:页面布局需要固定上下部分,使用position:fixed布局,发现会遮挡中间滚动部分. 解决:给中间部分加padding-top和padding-bottom,高度分别为上下固定部分的高度.
ios position: fixed 问题
为了解决卡顿的问题, 添加了如下代码 -webkit-overflow-scrolling: touch; 但是在ios上发现,利用fixed进行底部固定,出现bug 具体现象是: 在我滚动的时候,原 ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
1、position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
html随页面移动固定,div设置了position: fixed属性后如何可以做到随浏览器左右移动？...
把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部. 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题.但问题是当浏览器 ...

position fixed 在ios上滚动不固定问题

position fixed 在ios上滚动不固定问题相关推荐

最新文章

热门文章