DIV 仅在 chrome 中缩放内容时变得不可见但仍可点击

Question

我遇到这样一种情况，DIV 元素似乎随机变得不可见，同时保持可点击状态。它只发生在 chrome 中，我无法将问题追溯到特定的 css 设置。我希望你们中的一位能认识到这个问题并就可能的原因提出建议。

在我的 webpage 我有一个例子。该页面显示了一个正在播放的 YouTube 视频，并且在包含控件的底部有一个绝对定位的 div。当 window 超过一定大小时，控件将变得不可见。

重现错误

只发生在 chrome.
打开页面（视频开始播放）。如果未显示任何控件，则将页面调整得更小，直到控件变得可见。如果控件已经可见，则将页面调整得更大，直到控件消失。
当控件消失时，它们是不可见的，但仍然可以单击（悬停它们会使光标发生变化）。
看起来好像视频在按钮上方导致按钮变得不可见，但不知何故它们仍然可以被点击。

页面结构

页面结构如下所示：

<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% 高度。
包装器元素是绝对定位的，固定 width/height 为 1080*720，但会进行转换（缩放），使其尺寸尽可能大，同时适合容器并保持纵横比。此缩放是在 window 调整大小时完成的。
控件绝对定位在播放器元素上。整个控件 div 都消失了（不仅仅是 individual 控件元素）。然而，当应用 css 鼠标悬停效果时，它们仍然会触发。 onclick 事件仍然会触发。
当显示图像而不是视频时，该错误不会发生。

我知道如果没有完整的代码就没有太多内容可以继续，但是整个页面都是使用 javascript 构建的并且很多。我只是想知道在使用以下一项或多项时是否存在 divs 在 chrome 中消失的已知错误：

绝对定位divs
变换比例
普通视频元素/youtube 视频 iframe（在我的情况下两者都会发生）

编辑： 好的，我在最小的 html/js 页面中重现了该问题（参见 here）。我无法将其放在 jsfiddle 上，因为您无法将 jsfiddle 的输出帧调整到足以重现该错误的大小。我追查了问题，发现当我从播放器元素中删除 overflow-x: hidden; 和 overflow-y: hidden; 时，控件 DIV 不再变得不可见。但是，如果我这样做，则意味着当内容溢出播放器元素时，它不会被隐藏。任何人都知道为什么溢出设置会导致控件 div 消失但不会变得不可点击，以及如何解决它？

Answer 1

好的，我发现问题是由播放器元素上的 overflow: hidden; 引起的。通过删除 overflow: hidden; 设置，问题消失了。

除了删除 overflow: hidden;，我还可以在 .controls 元素和 .control 元素上使用：transform: translate3d( 0,0,0 );。

但是，我仍然不知道为什么会出现这个问题，以及为什么上面的修复了它。

DIV 仅在 chrome 中缩放内容时变得不可见但仍可点击

DIV becomes invisble but remains clickable when scaling content only in chrome

javascript

css

jquery

scaletransform