工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果;

在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器、UC浏览器、360浏览器(这几个是ios最容易出问题的浏览器);

问题:当用户快速滑动页面的到时候,fixed的元素就会在窗口跳动或者抖动,非常影响用户体验

下面提供几个解决方案,仅供参考,如有更好更有效的解决办法,欢迎留言交流探讨!

方法一:

给body设置高度100%

body,html{
widht:100%;
height:100%;
}

这个方法很有效,但是适用于自己单独开发的页面。

如果是项目中已经做好的页面,有其他特效,直接设置这个属性,可能对页面的其他功能造成影响。

如果使用此法,本地调试效果不好,建议不要使用。

方法二:

给fixed的元素添加背景定位的属性

background-attachment:fixed;

切忌:这个属性不要给有背景图片的元素添加

这个方法看起来也生效了,由于身边没有测试机的限制,无法测试效果,有条件的朋友可以试一下;

下面是网络上查到的其他方法,我试过没起作用,列出来供大家参考

方法三:

给固定定位的元素添加transform属性

transform:translateZ(0);或者transform:translate3d(0,0,0);

我尝试的结果是,这个方法没有起效;

方法四:

多加一层盒子,外层fixed固定定位,内层的设置绝对定位absolute;

还有一种方法说可以用绝对定位模拟固定定位,本人么有模拟出来,网上提供的方法也没有实现这个效果。

移动端fixed的元素抖动的问题的更多相关文章

  1. Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  2. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  3. CSS fixed 定位元素失效的问题

    一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...

  4. UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素

    "UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高 ...

  5. Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

    最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...

  6. Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  7. 虚拟键盘冲击移动端fixed布局的解决方案

    在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug ...

  8. [转] Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  9. 八、Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

随机推荐

  1. 如何获取select中的value、text、index相关值 && 如何获取单选框中radio值 && 触发事件 && radio 默认选中

    如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...

  2. Word常用定义的变量

    unit U_WordConst;  interface {*******Word窗体状态************} const   wdWindowStateNormal = $00000000;  ...

  3. spring data jpa关联查询(一对一、一对多、多对多)

    在实际过往的项目中,常用的查询操作有:1.单表查询,2.一对一查询(主表和详情表)3.一对多查询(一张主表,多张子表)4.多对多查询(如权限控制,用户.角色多对多).做个总结,所以废话不多说. 使用i ...

  4. POI基本操作

    1.读取excel文件 InputStream is = new FileInputStream(filesrc); POIFSFileSystem fs = new POIFSFileSystem( ...

  5. 在Eclipse或工作空间中 ,复制或修改项目后,把项目部署后发现还是原来的项目名称

    1 问题引出 1 在eclipse中直接复制一个项目,修改名称之后,然后部署,部署之后的项目名称还有原来的项目名称 2 在eclipse的工作空间中直接复制一个项目,修改名字之后,发布也会出现同样的问 ...

  6. Android开发环境搭建步骤-【Android】

    本教程是android开发环境在windows下的安装配置,经本人测试完全正确无误.这个教程是史上最详细的android开发环境搭建教程. 工具/原料 Eclipse 3.7.0.Java Jdk6. ...

  7. Android捕捉图像后在SurfaceView上变形显示问题的处理

    我们在Android中经常会使用SurfaceView编写自定义的摄像头,可是有的时候会经常会出现图像的变形,我们就会很郁闷的问这到底是为什么呢?其实这个最根本的原因是SurfaceView和PreV ...

  8. Python对列表中字典元素排序

    问题起源 json对象a,b a = '{"ROAD": [{"id": 123}, {"name": "no1"}]} ...

  9. .netCore2.0 WebApi 传递form表单

    随着it的技术发展,目前越来越多的项目采用前后端分离的开发模式,通过webapi提供接口数据来进行交互 最近项目用的是.netCore WebApi,在最近的项目使用中发现一些问题,进行记录.个人简介 ...

  10. redis(5)持久化

    一.持久化 计算机的数据有两种状态: 1)持久态:如硬盘上的数据 2)瞬时态:如内存当中的数据 持久化就是将瞬时数据转换为持久数据的一个过程,但注意持久化并不意味的数据永远存在,针对不同的持久化,数据 ...