复选框在Chrome溢出Retina屏幕

Question

我碰到今天来了一个很有趣的问题上，也许你能想到的东西。忍耐一下，这是非常复杂的，在Chrome可能是一个错误：d确切的说，这是需要重现该问题：

• 一个HiDPI屏幕（我测试了它的视网膜上的MacBook）
• 铬40（我的客户曾与V39的问题，但，但我没有测试）

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

• 与transform财产
• 在页面上的元素是（在任何地方，而不是之后直接），具有以下特性股利后：
  • 一个border-radius
  • overflow: scroll/auto和固定（或MAX-）高度
  • 含复选框是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显示：

任何想法或者我应该提交本作中，浏览器的错误？顺便说一下，在现实生活中出现这种情况与谷歌地图有也可滚动列表与复选框:)

Answer 1

刚刚摆脱容器上的边界半径的似乎解决它的网页上。你出于某种原因需要吗？

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

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