Javascript DIV变得不可见，但仅在chrome中缩放内容时仍保持可点击状态

我遇到过这样一种情况：DIV元素似乎随机变得不可见，而仍然可以单击。这只发生在chrome中，我无法将问题追溯到特定的css设置。我希望你们中的一位能够认识到这个问题，并就可能的原因提出建议

我有一个例子。该页面显示正在播放的youtube视频，底部有一个绝对位置的div，其中包含控件。当窗口超过一定大小时，控件将不可见

复制错误

• 只发生在铬合金中
• 打开页面（视频开始播放）。如果没有显示控件，则缩小页面大小，直到控件可见。如果控件已经可见，则将页面调整得更大，直到控件消失
• 当控件消失时，它们是不可见的，但仍然可以单击（悬停它们会使光标发生变化）
• 似乎视频位于按钮上方，导致按钮不可见，但不知何故，它们仍然可以被单击

页面结构

页面的结构如下所示：

<div class="container" style="width: 100%; height: 100%;" >
    <div class="wrapper" style="width: 1080px; height: 720px;">
        <div class="player">
            // videos element.
        </div>
        <div class="controls">
            <div class="control"></div>
            <div class="control"></div>
            <div class="control"></div>
        </div>
    </div>
</div>

//视频元素。

• 容器被拉伸以占据屏幕的100%宽度和100%高度
• 包装器元素是绝对定位的，具有1080*720的固定宽度/高度，但经过变换（缩放），以使其尺寸在适合容器内部和保持纵横比的同时变得尽可能大。此缩放是在调整窗口大小时完成的
• 控件绝对位于播放器元素上方。整个控件div消失（不仅仅是单个控件元素）。但是，当应用css鼠标悬停效果时，它们仍然会触发。而onclick事件仍在发生
• 当显示图像而不是视频时，该错误不会发生

我知道如果没有完整的代码，它不会有太多的进展，但是整个页面是使用javascript构建的，非常多。我只是想知道，当使用以下一个或多个选项时，chrome中是否存在DIV消失的已知bug：

• 绝对定位div
• 变换尺度
• 普通视频元素/youtube视频iFrame（在我的案例中，两者都会发生）

编辑：

---

好的，我在一个最小的html/js页面中重现了这个问题（请参阅）。我无法将其放在JSFIDLE上，因为您无法调整JSFIDLE输出帧的大小，使其足以重现错误。我找到了问题所在，发现当我删除

overflow-x:hidden时和
溢出-y：隐藏从player元素开始，控件DIV不再不可见。然而，如果我这样做，这意味着当内容溢出播放器元素时，它将不会被隐藏。有人知道为什么溢出设置会导致控件div消失但不会变得不可读取，以及如何解决吗？
好的，我发现问题是由
溢出：隐藏。通过删除
溢出：隐藏设置问题已排除

而不是删除
溢出：隐藏我也可以使用：
转换：translate3d（0,0,0）

但是，我仍然不知道为什么会出现这个问题，以及为什么上面的方法会解决它。
我刚刚在Chrome 70中遇到了完全相同的问题。事实上，添加转换修复了它…另一个确认：溢出：隐藏和缩放转换的某种组合导致了Chrome中元素的消失。添加变换：translate3d（0,0,0）；到溢出的元素：hidden阻止元素消失。问题只发生在Chrome上（在Mac上；没有测试Windows）。