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

netsky114阅读8评论4 个月前

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

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

蒙层随之变动坐标 translateY属性

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

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

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

加载中…
精选评论
4 个月前Meathill

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

4 个月前netsky

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

4 个月前Meathill

代码贴出来看看

模拟器是啥

4 个月前netsky

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

4 个月前netsky

感谢各位,问题已解决。

是.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

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

3 个月前Never let ...

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

1 个月前spicru2

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

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

推荐话题
    加载中…
加入组织

微信扫码,每周推送工作机会。