提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

safari: css:解决translate时移动的元素闪烁(safari 15.5)

CSS 解决 移动 元素 闪烁 safari translate
2023-09-14 09:01:15 时间

一，解决translate时移动的元素闪烁:

1,问题的表现：

mac版safari,在div有transform translate动画滑动时会发生闪烁（或者说是闪动，有黑影闪过）

另外滑动的div达到一定长度才有这个现象:

640px x 3的长度没有此问题，1280px x 3的长度时有此问题

2,问题的解决:

将-webkit-backface-visibility: hidden;应用于移动元素
将-webkit-transform: translate3d(0, 0, 0);应用于其所有子元素，
移动时的闪烁会消失

3,参考的文档:

https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，演示代码

html代码:

      <div id="viewport" class="viewport" style="width:300%;-webkit-backface-visibility: hidden;">
        <div id="page_left" data-num="0" class="pageview" 
style="height:896px;position:absolute;left:0px;-webkit-transform: translate3d(0, 0, 0);">
            <div class="content_final" id="content_left" style="width:1280px;height:896px;color:#ffffff;" >
            </div>
        </div>
        <div id="page_middle" data-num="1"  class="pageview" 
style="height:896px;position:absolute;left:1280px;-webkit-transform: translate3d(0, 0, 0);">
            <div class="content_final" id="content_middle" style="width:1280px;height:896px;color:#ffffff;">
            </div>
        </div>
        <div id="page_right" data-num="2"  class="pageview" 
style="height:896px;position:absolute;left:2560px;-webkit-transform: translate3d(0, 0, 0);">
            <div class="content_final" id="content_right" style="width:1280px;height:896px;color:#ffffff;">
            </div>
        </div>
      </div>

js代码:

        dest_offset = pageWidth*2;
        //console.log("==================page_go_right:dest_offset:"+dest_offset);
        //滑动到中间
        var time=0.5;
        document.getElementById('viewport').style.webkitTransition = 'all ' + time + 's ease-in-out';
        document.getElementById('viewport').style.webkitTransform = 'translate(-'+dest_offset+'px, 0)';

三，查看safari的版本:

 

相关文章