关于IOS下微信浏览器 CSS 动画（animation）卡顿、掉帧的情况

最新推荐文章于 2024-09-14 15:56:48 发布

牵风纸鸢

最新推荐文章于 2024-09-14 15:56:48 发布

阅读量4.3k

点赞数

分类专栏： css javascript html5

本文链接：https://blog.csdn.net/tuweifus/article/details/104677788

版权

javascript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

最近在做一个抽奖页面开发，应用了一些CSS3动画（animation）。发现 IPHONE8 下的微信浏览器下动画过程出现卡顿、掉帧现象。

而将页面在 Safari 中打开，却很流畅。在安卓手机中也运行流畅。

后面找了另外一部 IPHONE SE 发现运行也很流畅。这就没道理了， IPHONE SE 性能比 IPHONE8 更低。

后面将 IPHONE8 的微信完全推出，重新进入打开后正常了。动画真是丝丝顺滑。可能是微信运行久了，缓存里面的东西太多了。导致性能下降吧。

PS：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牵风纸鸢

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ios css中animation问题

elsakun的博客

08-23

1043

关于ios使用animatiaon遇见的问题背景描述在animation中可以串联多个动画用逗号隔开，代码如下： <div class="my-animation"> 测试动画 </div> .my-animation { width:100px; height:100px; animation:rotate 1s forwards, breathing 1.5s liner 1s infinite; } @keyframes breathing { 0% {

web 移动端 ios 浏览器中 animation 动画异常

weixin_34209851的博客

02-21

1235

关键字：animation，ios，移动端，异常解决问题的办法：页面dom加载完毕时延时给dom加上动画类名。即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名。我们在写动画的时候常常会遇到添加简单css动画的需求，首选利用animation和@keyframe来实现。当需要一个无限动画的时候，anim...

参与评论您还未登录，请先登录后发表或查看评论

bug 记录 - animation 在 IOS机型掉帧情况

最新发布

神膘护体小月半的博客

09-14

689

【代码】bug 记录 - animation 在 IOS机型掉帧情况。

记录解决动画在IOS上卡顿的问题

qq_41910886的博客

12-26

679

使用CSS + JS实现滑动动画，在IOS上一顿一顿的，通过创建animation对象解决问题

【bug记录6】css 写animation时，Safari浏览器最后一帧部分样式闪回

weixin_57208584的博客

08-27

402

在动画的最后一帧时，元素回到初始的scale和opacity设置，但并没有移动到相应的偏移位置这一信息。transform的最佳排列顺序是translate、scale、rotate。想实现一个元素A从位置1平移到位置2，并且在移动过程中逐渐缩小、透明度变小。，可以知道并非fill-mode没有生效，而是在渲染初始样式时，，gpu的性能高、渲染生效速度更快。transform、opacity是用gpu渲染的属性。造成复杂动画渲染不同步的问题。，而非图层计算，因此可能在。根据三者属性的差别，

CSS3性能优化

qq_35401191的博客

08-13

904

这篇文章主要讲的是怎样制作流畅动画，特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点；接着会着重介绍用css3制作动画的注意事项。 1、用canvas、css3、jquery制作动画 Canvas 优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动...

ios 动画的时候如果加阴影会卡顿的

weixin_30527143的博客

12-21

记录一下今天某群的聊天记录，一些算是经验吧，以后有用的。呵呵~ 动画的时候如果加阴影会卡顿的 A 10:59:13 _toView.layer.shadowColor = [[UIColor blackColor] CGColor]; _toView.layer.shadowOffset = CGSizeMake(0.5, 0.5);...

animation动画在ios手机上速度很慢甚至禁止

weixin_38958405的博客

08-14

1502

开发过程中自己写了一个动画，在安卓手机和pc浏览器上正常，在ios手机上速度很慢，甚至停止。后来自己找到了原因，animation的动画用了rem单位，换成px就可以啦 ...

解决animation循环中停止时卡顿一下的问题

tenpage的专栏

04-15

8432

<rotate android:fromDegrees="0" android:toDegrees="359" android:duration="500" android:repeatCount="-1" android:pivotX="50%" android:pivotY="50%" /> 含

微信小程序实现可实时改变转速的css3旋转动画实例代码

09-22

CSS3动画具备跨浏览器的一致性，通过适当的前缀兼容各主流浏览器，包括iOS设备。 CSS3旋转动画的实现原理是通过`@keyframes`规则定义动画序列，然后通过`animation`属性将动画应用到元素上。一个基本的CSS3旋转动画...

前端逐帧动画性能探究和比较

cmyh100的博客

03-30

2177

什么是逐帧动画？首先看一下维基百科中的定义：定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。简单的来说就是：以一定的速度切换几张连续图像，让它动起来。人眼的物理性能能识别多少帧？理论上说，帧率越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲帧率为 60 帧时动画效果最好，也就是每帧的消耗时间为...

微信小程序可实时改变转速的css3旋转动画

li420520的博客

10-08

1381

在这里插入代码片极其简答就不多说了，直接上代码。 WXML 黑紫橙蓝绿 JS data: { backgroundcolor:‘red’ }, changeColor:function(e){ this.setData({ backgroundcolor: e.currentTarget.dataset.color }) } 那么下面咱们说一说这个旋转的动画。小程序里呢，有自己的动...

解决iOS的H5页面卡顿以及键盘回落后留白问题

senai_fh博客

11-15

1416

最近做的一个H5刚开开心心提测就被QA一顿怼????，当input输入完成后页面简直卡成翔????，当我接过手机亲自测试时慌的一批????，顿时开始怀疑人生????，马上开始进入紧张的排查中????，经过两天不断的调试优化????，最终完美解决所有问题❤️，此文可以彻底解决iOS的H5页面卡顿以及键盘回落后留白问题????。 #1.定位问题当QA和我反映页面卡顿只在iOS上出现时，第一反应肯定不是代码的问题，我也很纳闷iOS性能普遍要比...

移动端兼容性问题-css篇

weixin_43956521的博客

05-17

1299

scroll元素滑动，ios滑动比较生涩解决办法：给父类设置-webkit-overflow-scrolling:touch iphone及ipad下输入框默认内阴影解决办法：设置样式 -webkit-appearance:none; IOS 在点击div的时候会出现黑灰色背景块 -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ios 长按出现拷贝、复制等菜单选项 -webkit-t

微信小程序overflow:auto; ios设备卡顿问题

qq_37235823的博客

04-30

962

我们在开发微信小程序的时候，经常会使用到overflow:auto;来实现局部滚动效果，稍微注意的码有就会发现，ios真机设备上会有很明显的卡顿，但安卓设置就没这个问题。解决方式 view{ overflow:auto; -webkit-overflow-scrolling: touch; } 给 overflow 属性添加-webkit- （chrome、safari私有属性）友情提...

小程序动画模拟器正常手机卡顿

ICEBOUND47的博客

05-29

1435

问题场景在电脑模拟器上动画是可以正常显示的但是真机调试的时候动画出现卡顿解决办法可能是应为动画中有js的控制，js在真机调试的时候需要和电脑控制台交互，会导致js执行存在网络延迟如果预览的效果正常就不用担心 ...

解决前端的网站在IOS中出现的卡顿情况

u010613970的博客

10-24

548

公司的一个项目，之前同事已经有好几次跟我说这个项目的页面在IOS中出现卡顿的情况，但是一直没去改，今天的刚好要修改版面改功能，所以就一并改了一开始并不知道为啥IOS会出现很明显的卡顿的情况，但是在安卓中却是正常的滑动的，上网查了一下，其他解决方案有一个，就是使用以下的CSS样式就能解决掉 *{ -webkit-overflow-scrolling: touch; } 上面这段代码是全局的，...

uniapp写小程序和h5，ios滑动卡顿，h5滑动卡顿

weixin_69666355的博客

05-09

1030

1. 一般加一个-webkit-overflow-scrolling: touch；

wkwebview css 动画,IOS WKWebview踩坑记录

weixin_34051133的博客

08-03

681

webview崩溃不会crash而是会白屏在UIWebview中，进行了对性能影响过大的操作(例如图片特别的多，然后突然改变了css、调整页面字体，导致重绘；连续点击打开多个webview)，App会crash，但是WKWebview的现象是页面白屏。解决方案： IOS有方案待补充iOS 11.2 (15C114)图片缓存问题(1) 发送网络请求表现不同其余系统版本，在app未进入后台状态，同...

ios 微信浏览器返回菜单

09-07

iOS微信浏览器并没有一个直接的返回菜单选项，但是它提供了其他的导航方式来让用户返回上一页或者返回到主页面。首先，用户可以使用左上角的 "<" 符号来返回上一页。这个符号通常会显示在浏览器页面的左上角，用户只需点击它就可以返回上一个页面。另外，用户也可以通过点击右上角的 "..." 按钮来展开更多选项菜单，然后选择"返回微信"来返回到微信的主页面。这个选项相当于回到了微信聊天界面，而不是返回到之前的网页浏览状态。还有一个快捷的方式是通过滑动手指从屏幕左侧边缘向右滑动，即可返回上一页。总之，iOS微信浏览器并没有直接的返回菜单，但通过以上这些不同的导航方式，用户可以轻松地实现返回上一页或者返回到微信主页面的操作。