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上