移动端fixed的元素抖动的问题
工作中发现,给一个元素添加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的元素抖动的问题的更多相关文章
- Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)
转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- CSS fixed 定位元素失效的问题
一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...
- UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素
"UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高 ...
- Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱
最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...
- Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- 虚拟键盘冲击移动端fixed布局的解决方案
在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug ...
- [转] Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
- 八、Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...
随机推荐
- 对接京东jos遇到的坑 记录一下。方便查询
坑很多,有一些忘记了.文档乱的很,有问题可以私信我一下我看能不能想起来. 坑一.添加商品接口. {"error_response": {"code":" ...
- selenium+Python(鼠标和键盘事件)
本篇总结了 web 页面常用的一些操作元素方法,可以统称为行为事件有些 web 界面的选项菜单需要鼠标悬停在某个元素上才能显示出来(如百度页面的设置按钮). 1 简单操作 1.点击(鼠标左键)页面按钮 ...
- Python数据类型(字典)
文章内容参考了教程:http://www.runoob.com/python/python-basic-syntax.html#commentform Python 字典(Dictionary) 字典 ...
- 导入数据到HBase的方式选择
Choosing the Right Import Method If the data is already in an HBase table: To move the data from one ...
- emacs 配置 clojure
安装JDK,Version >= 6.0 java -version 2 安装EMACS,Version>=24 在脚本~/.emacs.d/init.el中增加如下内容 (require ...
- orcale 之 初识数据库一
数据库 数据库顾名思义数据的仓库,只不过这个仓库是在计算机的存储设备之中.一般来说,这些数据面向一个组织,部门或者整个企业,这些数据是按照一定的模型进行存放的数据集合,比如对于一个学生的管理系统来说, ...
- poj 2259 Team Queue
Team Queue Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 2977 Accepted: 1092 Descri ...
- 想熟悉PostgreSQL?这篇就够了
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由angel_郁 发表于云+社区专栏 什么是PostgreSQL? PostgreSQL是自由的对象-关系型数据库服务器,在灵活的BSD ...
- c#,利用WPF的ScaleTransform和TranslateTransform实现图片的缩放效果
一.缩放要求 1.缩放对象在可视区域内,已对象的中心点进行缩放. 2.缩放对象比可视区大,并且对象各边界都在可视区外围,那么已鼠标位置进行缩放. 3.缩放对象比可视区大,但是缩放后某一边界在可视区的对 ...
- ASP.Net Core MVC 网站在Windows服务器跑不起来
1.vs远程发布到服务器,浏览器访问,报错502 2.打开错误提示提供的网址参考 3.安装runtime,sdk,Hosting Bundle Installer,其他操作 .....发现并没有什么用 ...