複選框在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/