一，解决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
说明：作者:刘宏缔 邮箱: [email protected]
二，演示代码
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的版本:
标签：style,15.5,transform,safari,webkit,translate,com From： https://www.cnblogs.com/architectforest/p/16773802.html