Webkit scrollLeft 结合 CSS translate 水平偏移异常问题咨询

我之前也碰到过这个诡异的浏览器兼容问题，刚好能给你理清楚细节：

基础DOM结构说明 #

• Container：设置了overflow: scroll样式的可滚动容器
• Content：拥有固定指定宽高的子元素

触发异常的特殊场景（疑似WebKit内核Bug） #

当把Container滚动到最右侧（确保内容的右边界完全可见）时，给Content元素应用transform: translateX(-100px)样式，不同浏览器的表现会出现明显差异：

符合预期的表现（Firefox/Opera/Edge）

Content元素会向左偏移100px，原本被Content覆盖的Container背景会从偏移后空出来的区域显示出来。

异常表现（WebKit/Chrome）

Content元素没有按照预期完成向左偏移，依然停留在原位置，transform的偏移效果完全不生效。

内容的提问来源于stack exchange，提问作者ziom