【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 浏览器上设置overflow: auto 不可滚动

项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div .main { position: fixed; left: 0; right: 0; bottom: 0; top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } 里面是两个元素,上下布局,下面的元素本身是在自己的区域滚动,现在改为跟着上面的元素滚动,到一定距离时把tab…

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滚动条(将滚动…

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

//适配android上absolute和input的问题var oHeight = $(document).height(); //屏幕当前的高度$(window).resize(function() { if($(document).height() < oHeight -100) { $(".bottombox").css("display", "none"); } else { $(".bottombox").c…

IOS不支持overflow: hidden;

IOS不支持overflow: hidden; 假设页面上有个弹出窗,弹出窗出现后,只想让用户的视觉锁定在弹出窗上,正常我们会想到用overflow:hidden这个属性来实现,如下 html{ overflow:hidden; } 这样写在PC端上没有任何问题,效果杠杠到,但是在IOS移动端上,弹出窗出现后,依旧可以在背景层部分滑动 解决方案: html{ overflow:hidden; position:fixed; } 如果需要关闭弹窗后,滚动条出现,使用如下CSS即可. html{ o…

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…

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

[开源]在iOS上实现Android风格的控件Toast iOS的风格和Apple其他产品一样,简单而粗暴.没有给人其他选择的余地,让你又爱又恨.同样的,Apple对待iOS平台的开发人员和对待大众消费者一样,也不给你留余地.UIAlertView就是一个鲜明标志.功能简单,甚至单一,定制性差,消耗资源.在资源紧张的设备上,UIAlertView的动画效果都会稍微卡一下,很是别扭. 这时还是很希望在iOS上有一个Android风格的Toast控件. 终于http://code.google.co…

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

纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maxi…

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

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