视网膜屏幕上的 Chrome 中的复选框溢出

Question

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

• HiDPI 屏幕（我在 Retina MacBook 上测试过）
• Chrome 40（我的客户在使用 v39 时遇到了问题，但我没有测试）

更新：我在 iPad 和 Mac 版 Safari 上进行了测试（因为它们都使用 Webkit 并具有 HiDPI 屏幕），没问题。它似乎仅限于 Chrome。

• 页面上具有transform 属性的元素
• 在之后（任何地方，而不是直接在它之后），一个具有以下细节的 div：
  • 一个border-radius
  • overflow: scroll/auto 和固定（或最大）高度
  • 包含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 中的错误提交吗？顺便说一句，在现实生活中，这发生在一个带有谷歌地图的页面上，该地图还有一个带有复选框的可滚动列表:)

Answer 1

只是去掉容器上的边界半径似乎可以解决它。您出于某种原因需要它吗？

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

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