当前位置: 首页 > news >正文

IOS CSS3 right transformX 动画卡顿 回弹

在这里插入图片描述

卡片从右往左滑动,在同时变换 width height right transformX的时候 在某些IPhone机型上 会有卡顿,在Chrome和Android等很多机型都是OK的,包括我的iphone 14 pro max. IOS 18.2 也是好的。但是,新的iPhone16 也会卡,会回弹一下。

感觉像是计算的不够好,在变大和向左同时向右移动的时候,不能完美的计算出来合适的速度以及变换。

解决办法是,宽高变化替换成scale right不变,保持只改变transformX和scale 动画。虽然没有原来很好的位置和大小了。但是至少动画不是卡顿的。

@keyframes slideLastRightToActive {0% {width: 275px;height: 320px;scale: 1;right: 50%;transform: translateX(calc(50% + 40px));}100% {width: 275px;height: 320px;scale: 1.2;right: 50%;transform: translateX(calc(50% / 1.2));}
}

相关文章:

  • Flink 运维监控与指标采集实战(Prometheus + Grafana 全流程)
  • mac安装cast
  • 函数专题1
  • Kaamel隐私合规洞察:Temu在韩被罚事件分析
  • RPC框架源码分析学习(二)
  • 什么是路由器环回接口?
  • 鸿蒙OSUniApp 开发的文件上传与下载功能#三方框架 #Uniapp
  • 高云FPGA-新增输出管脚约束
  • 如何检测网站是否支持IPv6?有哪些IPv6测试指标?
  • upload-labs靶场通关详解:第6-9关
  • 【歌曲结构】1:基于歌词的歌曲结构分析:高潮、钩子、双副歌
  • 开发日常中的抓包工具经验谈:Charles 抓包工具与其它选项对比
  • 基于大模型预测胃穿孔预测与围手术期管理系统技术方案
  • React 轻量级富文本编辑器推荐(中文版)
  • 【大模型面试每日一题】Day 19:如何设计自动化评估框架验证大模型的多步推理能力(如数学解题)?
  • 课程11. 计算机视觉、自编码器和生成对抗网络 (GAN)
  • Leetcode刷题 | Day63_图论08_拓扑排序
  • 国标GB28181视频平台EasyGBS助力智慧医院打造全方位视频监控联网服务体系
  • 【氮化镓】HfO2钝化优化GaN 器件性能
  • 傻子学编程之——数据库如何性能优化
  • 马上评|安排见义勇为学生补考,善意与善意的双向奔赴
  • 在古老的意大利科莫歌剧院,廖昌永唱响16首中国艺术歌曲
  • 前四个月人民币贷款增加10.06万亿元,4月末M2余额同比增长8%
  • 人民日报任平:从汽车产销、外贸大盘看中国经济前景
  • 多家外资看好中国市场!野村建议“战术超配”,花旗上调恒指目标价
  • 福建厦门市副市长、市公安局局长陈育煌出任吉林省公安厅厅长