ios上-webkit-overflow-scrolling与position的bug

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

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

解决方案

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

时间： 2024-10-30 18:32:27

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

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

面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari内核,所以ios浏览器全部中枪. bug描述在进行事件委托时,如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效,调试结果为事件响应到body子元素为止,既没有冒泡到body上,也没有被body所捕获.但如果事件是DOM元素本身具有的,则不会触发bug.换而言之,只有元素的

ios上position:fixed失效问题

手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了固定定位的底部导航在ios上被弹出去此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="main_comment">```````````````````</div> <div class="commentBar">回复框</div> .main_comment{ width: 100%; position: absolute;

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

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-overflow-scrolling: touch; } 在使用overflow的的地方加上?-webkit-overflow-scrolling: touch;便可解决页面在ios机器上卡顿的问题. 解决由-webkit-overflow-scrolling: touch 引起的ios滚动条(将滚动

关于移动端开发时iOS上滑屏卡顿的问题，以及电话类数字的样式失控问题

写在前面的话: tips:写移动的时候,那些头部需要固定显示在显示屏顶部的,通常在PC端我会用fixed来写.但是,在移动端,这并不是一个好方法,因为弹出输入小键盘的时候,会造成fixed 的元素偏移掉,在这里有两种方法可以解决: 1.建议移动端布局采用以下方式(见正文),如果有错误的地方,还请指正~ 2.另外还看到一篇文章提到这个问题,作者让固定的头部仍然采用fixed, 然后内容区也用了fixed,内容区的fixed元素这样写:{position:fixed;top:80px;bottom:

解决ios手机页面overflow scroll滑动很卡的问题

解决ios手机页面overflow scroll滑动很卡的问题今天在IOS系统上测试 webAPPApp的时候发现使用了position:fixed/absolute时,DIV容器里面下滑动没有像普通页面一样顺畅,手滑到哪就停到哪.感觉很卡一样,而安卓效果正常,算是一个bug.终于在网上找到了一个解决方法. -webkit-overflow-scrolling:touch; 加上去后果然有用,也就是说DIV容器使用的定位属性引起的.当时效果是弹出一个层,body无滚动条,但是弹出层需要可以上下

h5页面在iOS上的问题解决

1.ios移动端软键盘收起后,页面内容被顶上去,不下滑回原处代码如下: $(function(){ $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); }); }) 原理就是弹起键盘的时候,window.scrollY会从0变到键盘的高度(例如:200),当输入框焦点失去后让scrollY回到0就好了.

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

解决ios.微信移动端的position: fixed; 支持性不好的问题在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

ios开发讲解之anchorPoint和position详解

(此篇文章为转载,感谢原作者描述的很准确) 引言相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置? CALayer的position点是哪一点呢? anchorPoint与position有什么关系? 每一个UIView都默认关联着一个CALayer, UIView有frame.bounds和center三个属性,CALayer也有类似的属性,分别为frame.bounds.position.anchorPoint.那positio

javascript的onbeforeunload函数在IOS上运行

今天在做项目的时候,组长让我用iPad测试一下前面写的离线缓存,后退不刷新页面,发现在iPad上onbeforeunload函数在iPad上一带而过,不运行??? 无奈之下,发现原来在IOS上,有自己的onshow和onhide方法 //搜索来自:http://www.cnblogs.com/vaal-water/archive/2012/09/25/2701769.html 原文如下: window.addEventListener("pageshow", myLoadHandle

移动端上传照片预览+draw on Canvas demo（解决iOS等设备照片旋转90度的bug）

背景: 本人的一个移动端H5项目,需求如下: 手机相册选取或拍摄照片后在页面上预览然后绘制在canvas画布上. 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下的画布会绘制你刚才拍摄的照片. 正常的结果: 正文: 让input file支持拍照+