Chrome上的CSS div背景顏色錯誤？

Question

我在Chrome瀏覽器中設置div的背景時遇到問題。 如果你看到，我有一個小的淺灰色盒子，我沒有實現並給出風格。 它隨機出現，並根據需要移動和重塑。 它不會發生在Safari或Firefox上，我無法理解為什么或如何解決它。

我的問題很奇怪。 我有以下代碼：

div className="row competition">
   <div className="col-lg-6 register-answer">
       <div className="compet-content">
           <input type="text" className="form-control answer" id="usr"/>
           <input type="text" className="form-control email" id="usr"/>
           <button type="button" className="btn btn-primary">Enter Competition</button>
       </div>
   </div>
   <div className="col-lg-6">
       <div className="pic">
           <img src={CompetitionImage} alt="Competition Image"/>
       </div>
   </div>
</div>

編輯（CSS類）：

.col-lg-6.register-answer {
    background-color: #adadad;
    .compet-content {
        width: 100%;
        height: 100%;
        input {

        }
        button {

        }
    }
}

我在'register-answer'類上設置了背景色，但是我嘗試了每個div，問題總是一樣的（它只發生在chrome上）。 我還有一個屏幕錄制供您查看： https ： //drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing

Answer 1

我也遇到了這個問題並發現了這個問題： http ： //www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome

嘗試了解決方案...... -webkit-transform: translate3d(0,0,0); 在規則中我指定background-color （ body ，在我的情況下）和工作。 仍在尋找更好的解決方案。

更新：看起來這是一個Chromium bug 。 如果你想為所有訪問者解決它，上面的hack似乎有用。 如果你想只為你解決它，你可以去chrome://flags/#enable-gpu-rasterization並啟用GPU光柵化。 我想這個bug很快就會被Chrome團隊修復，所以我決定不使用黑客。

Answer 2

我一直在處理同樣的問題。

我注意到，如果在應用背景顏色的元素上添加邊框，燈箱會消失。

如果它不會干擾您的設計，我建議您添加與背景顏色相同的邊框。

在你的情況下：

.col-lg-6.register-answer {
    border: 1px solid #adadad;
}

或者，如果您喜歡冒險，請嘗試使用background-clip：padding-box（幾乎）透明背景。 您的透明度必須> 0才能使黑客工作。 我將我的設置為0.01並且它可以解決問題（即rgba（240,240,240,0.01）。

Answer 3

嘗試添加背景顏色：透明在您希望灰色背景出現的div上