移动端 safari animation bug

2024-09-05

移动端采坑：Position: fixed 在Safari上的Bug

Position: fixed 在IOS上的显示效果会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部,即position: absolute,bottom: 0px;的情况点击fixed定位的元素,元素向上移,定位生效,位置偏移大解决方案 - 仅针对Safari 给fixed定位元素设置一个点击事件,在点击事件会调函数中加入 window.scrollTo(0, document.body.scrollHeight); (将页面视口定位至页面底部),然后

解决IOS移动端 Safari流浪器 onclick无法触发的问题

在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变大, 本来这个设计是很好的, 但是这也跟前端工程师带来麻烦, 当头部和尾部隐藏掉之后, 再点击底部的按钮, 不会触发, 它会自动识别点击了底部, 先把底部和头部显示出来, 再次点击这个按钮时才会触发, 这就导致了底部按钮需要点击两次才能触发, QA肯定是不愿意的, 用户更是不愿意的, 废话不多说,

移动端遇到的bug (长期更新)

移动端遇到的bug border-radius和transform在一起的bug 当父级设置了border-radius+overflow:hidden的时候,圆角是可以包住子级的,这是个很常见的场景. 但是当子级设置了transform属性后,bug就发生了. 准确来说是在移动端才会发生bug, pc端是正常的,具体的表现是: 父级的圆角无法包住运动中的子级. 解决方法也很简单,就是在父级添加transform:rotate(0deg)属性.手机查看例子至于为什么出现这种问题,以及解决bu

常见的H5移动端Web页面Bug问题解决方案总汇

解决jquery ajax调用远程接口的跨域问题首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get', url:url, // 下面的两行代码,就是解决跨域的关键 xhrFields: {withCredentials: true}, crossDomain: true, // 就是上面的两行代码 success: function(data){ // do something }, error

20150203一些移动端H5小bug解决

都是一些我也不知道为什么会有的bug. 1. 在三星note2,小米2,页面加载后,页面有黑块. 那么提高被盖住的部分z-index. 2. iphone5 ,ios7.0.4,上文字显示不出那么就先hide,setTimeout几百毫秒再show

网站端测试常见BUG

1.翻页翻页时,没有加载数据为空,第二页数据没有请求翻页时,重复请求第一页的数据翻页时,没有图片的内容有时候会引用有图片的内容 2.图片数据为空图片数据为空时,会保留为空的图片数据位置 3.链接为空链接为空时,点击图片,会刷新页面 4.服务端部分字段为空整个页面出现空白 5.session过期 session过期后,可能整个页面的数据就会丢失,页面呈现空白 6.文字内容过多文字内容过多时,页面排版错乱 7.不同平台的浏览器,功能.样式问题 PC与手机浏览器,同段代码会展示不同的样式

css---移动端网站专属BUG【苹果手机】

最近在前端写页面的时候,遇到了三个苹果手机的专属BUG,记录下... BUG1:苹果手机 form 表单的input有阴影解决方法: input { /* 1 */ overflow: visible; outline:none; -webkit-appearance: none; } BUG2:苹果手机form表单里的input是圆角解决办法: input{ border-radius:; } BUG3:苹果手机里面的的手机号码会被识别,添加蓝色解决办法:添加meta属性 <meta n

移动端 safari苹果手机对大额数字自动变成电话号码

1.苹果手机safari浏览器,用<meta name="format-detection" content="telephone=no">解决.缺点 :所有应该是电话号码的也不会是电话号码.,如果想要页面识别电话功能: <a href=“tel:1234561”>1234561 </a> 就可以了 2.用千分位分隔符,分割大额数字. 可以用一下2种方法: (1)正则: String(Number).replace(/(\

iso移动端input的bug解决（vue）

iso中input很奇怪,点击空白地方,键盘也不会消失,影响页面中其他功能解决办法: 点击的元素不是input或者textarea,那么就让上一个获得焦点的输入框失去焦点. 涉及的代码: <input type="tel" @focus="isohide($event)"> var iso = false;var nowinput = null;var browser={ versions:function(){ var u = navigator.u

CSS - 移动端常见小bug整理与解决方法总结【更新中】

常见问题总结与整理系列~ 1. border一像素在手机上看着有点粗的问题: 原理是因为:1px在手机上是使用2dp进行渲染的.换成 border: 0.5像素?是不行的! 解决方法: 把border给了元素的before或者after等伪类,然后让伪类利用css3的transform的scaleY(0.5)缩放0.5像素,这样,就能实现了. ps:小程序里的button的border也是这种方法解决得. <!doctype html> <html lang="en"

【译】怎样处理 Safari 移动端对图片资源的限制

原文作者:Thijs van der Vossen 本文翻译自<How to work around the Mobile Safari image resource limit>,原文写于2010年10月25日.可能部分限制已经不再适用. 翻译本文的目的是作为<读Zepto源码之assets模块>的附文,读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 正文开始: 受限于 Ipad 和 Iphone 的可用内存,Safari 浏览器的移

一个 Safari 的 new Date() bug

开发「bufpay.com 个人即时到账收款平台」后台套餐修改功能的时候碰到一个 new Date() bug. 既在 Safari 里面不支持 var t = new Date('2018-06-15 00:00:00'); 这样的初始化,只支持 var t = new Date('2018-06-15'); 和 var t = new Date('2018-06-15T00:00:00'); 但是在 Chrome 里面,以上三种都是支持的.这个地方需要注意,很容易被忽略. 这个 bug (应

css3 animation动画技巧

一,css3 animation动画前言随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更顺畅,css3动画如何做弧线动画,css3动画是否有动画库,css3帧动画如何快速简单…… 为了解决这些折磨人的问题,我们今天来分析一下: 首先介绍css3 Animation动画库: http://daneden.github.io/animate.css/ 基本涵盖了我们常见的基础css3动

PC端和移动APP端CSS样式初始化

CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们一般化的样式:为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性:用一些小技巧解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的

Issues with position fixed & scroll（移动端 fixed 和 scroll 问题）

转载请注明英文原文及译文出处原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed 和 scroll 问题译文作者:鎏金圣手火麒麟最近在做iOS端的H5页面时,遇到了一个定位问题: 1.position: fixed 元素在页面滚动时属性值变为absolute,在页面停止滚动瞬间,才恢复fixed: 2.当使用 fixed 定位的元素,存在于进行滚动的容器元素内时,拖动容器元素会使出现

移动端WEB开发代码片段

WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能(不明白说的是什么).其实Web APP就是一个针对Iphone.Android等智能手机优化后的web站点,它使用的技术无非就是HTML或HTML5.CSS3.JavaScript,服务端技术JAVA.PHP等(这下明白了).再直白点说就是针对智能手机上的网站开发,只不过优于我们常说的WAP.我从上半年开始接触移动端WEB APP,前前后后摸索,求索,探索(在此,感谢Kevin的补课),也做了一些项目,现在

HTML5移动端触摸事件

一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如果有就会缩放,如果没有则是一个click事件.所以cilck操作会有卡顿感觉. 2.dblclick事件失效由于双击缩放的存在,移动端的dblclick事件也失效了. 二.移动端触摸事件 touchstart 在屏幕上按下手指时触发 touchmove 在屏幕上移动手指时触发 touche

修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题

原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和jwplayer,由于ckplayer是国内大牛开发的,中文文档比较官方,而且主要是文档说可以禁用拖动,就直接使用了ckplayer,没有测试jwplayer,待日后有时间再学习~~ ckplayer的使用文档见官方网站:http://www.ckplayer.com ,当前CKplayer.js版

iPhone调试移动端webview

一.模拟器调试 1.启动Xcode 2.选择菜单Xcode - Open Developer Tool - Simulator 3.启动Simulator后,选择Simulator菜单Hardware - Device - iOS12.x - 再选择需要的手机/iPad型号 4.安装App,直接拖放App安装包到Simulator屏幕上,等待自动安装结束. 5.在App内访问开发环境,打开电脑端Safari浏览器,选择菜单:开发 - 模拟器,右侧会显示App内打开的web地址列表,选择你要调试的

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

Box Model,边距折叠，内联和块标签，CSSReset

一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css reset

移动端 safari animation bug

热门专题