子元素overflow：hidden失效

Question

<style>
    .box{
        width:300px;
        height:100px;
        overflow:scroll;
        background-color: darkgrey;
        position: relative;
    }
    .box1{
        width:90px;
        height:100px;
        overflow: hidden;
        background-color: cadetblue;
        position: absolute;
        
    }
</style> 

<div class="box" >
    <div class="box1" >1111111111111111</div>
    <div class="box1" style="transform: translateX(100px);">2222222222222222</div>
    <div class="box1" style="transform: translateX(200px);">3333333333333333</div>
    <div class="box1" style="transform: translateX(300px);">4444444444444444</div>
    <div class="box1" style="transform: translateX(400px);">5555555555555555</div>
    <div class="box1" style="transform: translateX(500px);">6666666666666666</div>
</div>

代码如上。
在chrome中可以正常显示

但是在safari中，效果就变成了下图

子元素中的overflow：hidden失效了，作为对比，没有使用translate的第一个box依然正常。测试的时候还发现，如果父元素没有出现滚动条，也不会触发这个bug，具体原因是什么？在不修改现有布局的情况下，要怎么解决这个问题呢

Answer 1

以前的逻辑是：

absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。

后来chrome改了，改成“无论是overflow容器还是嵌套子元素，只要有transform属性，就会hidden溢出的absolute元素。”
应该是Safari对transform的实现不同，有个简单的解决办法，把transform改成left。