如上图，.fb-box是一个大div，包含着页面上的所有元素,包括所看到的那个弹窗.dialog-img，并且设置了height:100%;-webkit-overflow-scrolling:touch;

但是这样设置，在ios上会有一个bug,页面滚动一定的距离后，点击了显示弹窗，再关闭的话，就会发现，弹窗的一部分还“留在页面上”。定位需要，-webkit-overflow-scrolling:touch;也需要。

解决方案

把弹窗的div和.fb-box以兄弟节点的方式布局，在外层再弄一个div包住,这个坑就算爬起来了

ios上-webkit-overflow-scrolling与position的bug的更多相关文章

  1. ［ 面试没回答上的问题2］IOS上给body绑定click事件的bug

    面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...

  2. IOS 浏览器上设置overflow: auto 不可滚动

    项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div .main { position: fixe ...

  3. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  4. 解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

  5. 适配android和iOS上position:absolute和input问题

    //适配android上absolute和input的问题var oHeight = $(document).height(); //屏幕当前的高度$(window).resize(function( ...

  6. IOS不支持overflow: hidden;

    IOS不支持overflow: hidden; 假设页面上有个弹出窗,弹出窗出现后,只想让用户的视觉锁定在弹出窗上,正常我们会想到用overflow:hidden这个属性来实现,如下 html{ ov ...

  7. javascript的onbeforeunload函数在IOS上运行

    今天在做项目的时候,组长让我用iPad测试一下前面写的离线缓存,后退不刷新页面,发现在iPad上onbeforeunload函数在iPad上一带而过,不运行??? 无奈之下,发现原来在IOS上,有自己 ...

  8. [开源]在iOS上实现Android风格的控件Toast

    [开源]在iOS上实现Android风格的控件Toast iOS的风格和Apple其他产品一样,简单而粗暴.没有给人其他选择的余地,让你又爱又恨.同样的,Apple对待iOS平台的开发人员和对待大众消 ...

  9. 纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

    纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...

  10. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

随机推荐

  1. Jmeter Cannot load JDBC driver class 'com.mysql.jdbc.Driver'问题解决方案

    1.下载 mysql-connector-java-5.1.44-bin.jar,哪个版本都可以,按自己的mysql版本来 2.将jar包放到jmeter安装路径下的 apache-jmeter-3. ...

  2. JDK，常见数据结构解读

    一.情有独钟 对数据结构情有独钟,打算慢慢把jdk里的实现都读一遍,发现其中的亮点,持续更新. 二.ArrayList 这应该是我们学习java最早接触的到的数据结构,众所周知,数组在申请了内存之后, ...

  3. Opencv --- 图像像素遍历的各种方法

    #include <opencv2/core.hpp> #include <opencv2/imgcodecs.hpp> #include <opencv2/highgu ...

  4. Grid++Report——打印功能

    一.安装下载 http://www.rubylong.cn/Download.htm 二.添加引用 三.添加类 四.制作打印模板 1.新增报表节 新增明细网格 新增列→设置为自由格→调整大小 报表→设 ...

  5. (转) rabbitmq应用场景

    原文:http://blog.csdn.net/wangpengblog/article/details/76405598

  6. Android 开发工具类 24_getHtml

    获取网页(JSP)源码 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; impo ...

  7. IDEA里运行程序时出现Failed to execute goal org.scala-tools:maven-scala-plugin:2.15.2:compile(default) on Project DataFusion:wrap:org.apache.commons...错误的解决办法（图文详解）

    不多说,直接上干货! 问题详情 比如我们习惯在IDEA里打包用mvn clean package 在Scala IDEA for eclipse里出现mvn clean compile assembl ...

  8. 在商城系统中使用设计模式----简单工厂模式之在springboot中使用简单工厂模式

    1.前言: 不了解简单工厂模式请先移步:在商城中使用简单工厂.在这里主要是对springboot中使用简单工厂模式进行解析. 2.问题: 什么是简单工厂:它的实现方式是由一个工厂类根据传入的参数,动态 ...

  9. sockets+proxychains代理，使内网服务器可以访问外网

    Socks5+proxychains做正向代理 1.         应用场景: 有一台能上外网的机子,内网机子都不能连外网,需求是内网机子程序需要访问外网,做正向代理. 2.         软件 ...

  10. java开发编译器：中间语言格式

    阅读博客的朋友可以到我的网易云课堂中,通过视频的方式查看代码的调试和执行过程: http://study.163.com/course/courseMain.htm?courseId=10028300 ...