html - Retina 屏幕上的 Chrome 中的复选框溢出

Question

今天遇到的一个很有意思的问题，说不定你能想到点什么。请耐心等待，这非常复杂，可能是 Chrome 中的一个错误:D 准确地说，这是重现问题所必需的:

• HiDPI 屏幕(我在 Retina MacBook 上测试过)
• Chrome 40(虽然我的客户遇到了 v39 的问题，但我没有测试过)

更新:我在 iPad 和 Safari for Mac 上测试过这个(因为它们都使用 Webkit 并且有 HiDPI 屏幕)，没问题。它似乎仅限于 Chrome。

• 页面上具有transform 属性的元素
• 在之后(任何地方，而不是直接在它之后)，一个具有以下细节的 div:
  • 一个border-radius
  • 溢出:滚动/自动 和固定(或最大)高度
  • 包含position:relative
  的复选框

这将破坏复选框，即使有 overflow: scroll，它仍然可见。任何其他元素(文本)将被正确隐藏，它只发生在复选框上，没有其他输入。

示例代码:

<div class="bug"></div>
<div class="container">
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
</div>

.bug {
    transform: translateZ(0px);
}
input[type="checkbox"] {
    position: relative;
}
.container {
    /* Needed */
    height: 100px;
    overflow: scroll;
    border-radius: 2px;

    /* Illustration purposes */
    margin-top: 50px;
    background: red;
}

JSFiddle(已经滚动了一点所以你可以立即看到问题):http://jsfiddle.net/b4LtsbLv/

您无权访问 HiDPI 显示器的屏幕:

有任何想法或者我应该将此作为 Chrome 中的错误提交吗？顺便说一句，在现实生活中，这种情况发生在带有 Google map 的页面上，该页面还有一个带有复选框的可滚动列表:)

Answer 1

只是去掉容器上的 border-radius 似乎可以解决这个问题。您出于某种原因需要它吗？

.container {
    /* Needed */
    height: 100px;
    overflow: scroll;
    /*border-radius: 2px;*/
    /* Illustration purposes */
    margin-top: 50px;
    background: red;
}

http://jsfiddle.net/b4LtsbLv/3/