求助【前端技术求助】css3 动画效果真机卡顿&img 绝对定位translate属性 图片抖动

头像
young
118阅读8评论

1、一张蒙层图片在一个div中

随着屏幕中心焦点滑动变化

蒙层随之变动坐标 translateY属性

目前效果已实现 在模拟器中很流畅 但是在真机浏览器中访问时比较卡顿

询问各位大佬 真机中此时如何调试,iphone&Android设备均能复现

2、一张img 绝对定位到一个div正中间,垂直水平居中,结果div改变宽度时,img出现抖动的问题(左右抖动),期望静止不动,目前无法定位到是哪里的问题。

收藏
举报
加载中…
精选评论
头像
等级6

不要用 `top`, `left`,用 `transform`,CSS 变形会调用 GPU,性能会好很多。

已按照此方案修改,依旧卡顿。

浏览器自带的内核渲染的模拟器。

头像
等级3

感谢各位,问题已解决。

是.to('.cameras_container', 4, { filter: "blur(30px) opacity(0.6) contrast(1)","-webkit-filter":"blur(30px) opacity(0.6) contrast(1)","-moz-filter":"blur(30px) opacity(0.6) contrast(1)","-ms-filter":"blur(30px) opacity(0.6) contrast(1)"});

引起的 filter:blur

改为替换磨玻璃素材图,根据滚动改变透明度实现。

头像
等级0

这是京东的一个面试题,🤣

头像
等级0

提问的话建议都附上详细的代码、环境和问题再现步骤,甚至是 GIF 截图

直接看这样的描述挺恼火的,要是放在 stack overflow 和 github 都没人愿意回答