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光栅化。我想这个错误很快就会被Chrome团队修复，所以我决定不使用黑客。

Answer 2

我一直在处理同样的问题。

我注意到如果在应用背景颜色的元素上添加边框，灯箱就会消失。

如果它不会影响您的设计，我建议您添加与背景颜色相同的边框。

在你的情况下：

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

或者，如果您喜欢冒险，请尝试使用background-clip：padding-box（几乎）透明背景。你的透明度必须是＆gt; 0为黑客工作。我将我的设置为0.01并且它可以解决问题（即rgba（240,240,240,0.01）。

Answer 3

尝试在您想要灰色背景出现在

上的div上添加background-color：transparent