【safari坑之 回弹】的更多相关文章

safari坑之 回弹

博客地址: https://www.seyana.life/post/20 今天在使用safari浏览博客的时候, 发现在拉至顶部并产生回弹之后,头部导航隐藏了, 除非在上拉的时候,刚好达到顶部而不超出产生回弹才会正常显示 这是博客原来隐藏显示头部导航的逻辑 fix: { inserted(el) { let beforeScrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY |…

safari坑之 video

博客地址: https://www.seyana.life/post/19 本来是打算给博客左上角的gif做个优化, 把gif换成webm,以video的形式自动播放,能从180k降到50k, 现在浏览器也都禁止video自动播放,但是允许静音自动播放,也加上了muted 这在chrome没有任何问题, 但是,在safari就没用了,甚至无法加载出来, 除非添加controls属性,但这对于小尺寸展示还加上操作控件,效果可想而知,更何况为了自然点我还ps了好久. 而且使用qq一类的内置浏览器的话…

flex定位下overflow失效的问题研究

概述 这是我在写移动端页面遇到的问题及解决方法,记录下来供以后开发时参考,相信对其他人也有用. 问题 之前写移动端页面,有一个顶条是导航条,需要固定在页面顶部,并且里面的元素需要可以左右滚动. 但是当导航条设置fixed定位时,发现里面的子元素不能横向滚动. position: fixed; top: 0; left: 0; overflow-x: auto; 最后通过加一个嵌套元素,给这个嵌套元素设置absolute定位解决: //嵌套子元素 position: absolute; top:…

ios10 safari 的坑！

| 导语 ios10 的safari,又给前端开发者挖坑了..测试验证此问题只出现在ios10 safari中.想早点知道结论的,可以直接看最后一个结论~因为,解决过程不重要! 个人原创,未经允许,禁止转载! 本文以项目为基础来谈坑~ 一.我们的项目-H5导航 展示一下我们的项目,注意图中红框区域,是有手势滑动效果的区域(右图是滑动到一半的效果,正常情况下,滑动到这个位置松手的话,是会自动设置展开的).咦,看起来很正常啊.对,现在是正常的 二.异常情况 But,ios10 safari下,显示如…

打开自定义链接新窗口（safari JS prompt的坑！）2016.03.08

很简单的一个小练习,但做的过程中发现safari的一个坑,使用prompt()方法的时候,点击取消和不输入一样,会返回空字符' ',而不是null! 要求: 制作新按钮,"新窗口打开网站" ,点击打开新窗口. 任务: 新窗口打开时弹出确认框,是否打开 提示: 使用 if 判断确认框是否点击了确定,如点击弹出输入对话框,否则没有任何操作. 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/ 打开的窗口要求,宽400像素,高500像素,无菜单栏.无工具栏.…

【safari挖的那些坑】iOS safari 浏览器 时间乱码（ios时间显示NaN） 问题解决

通常 iOS下时间错误表现形式 问题一: 这个界面运用了大量的日期类型的计算,当我们用JavaScript实例化一个日期对象时,我们可以这样用: var date =new Date(); 上面这段代码是获取当前日期,这段代码在Firefox.Chrome.Safari浏览器中都可以运行.但是如果我想根据字符串获取日期,问题就来了.看下面代码. var date =new Date("2016-05-31 08:00"); 这段代码是获得字符中指定的日期,它Firefox.Chrome…

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrolling : touch; 可用以下网页测试: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="ut…

完美解决safari、微信浏览器下拉回弹效果。

完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 <body class="box"> <div class="scroll" style="height:1500px"> </div> </body> JS代码   var overscr…

移动开发那些坑之——safari mobile click事件的冒泡bug

今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { alert("hehe"); }) </script> <div class="callApp caMiddle">打开app,马上参加活动</div> <a href="javascript:;" class=&q…

Safari中的new Date()格式化坑

今天在测试的时候发现,在Chrome中的如下代码: new Date("2014-03-09"); 在Safari中报错invalid date.经过查阅资料找到类似的问答: stackOverflow地址:http://stackoverflow.com/questions/4310953/invalid-date-in-safari 解释与翻译如下: 目前Safari可以支持的标准格式如下: MM-dd-yyyy yyyy/MM/dd MM/dd/yyyy MMMM dd, yyy…