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

尝试在您希望灰色背景出现的 div 上添加背景颜色：透明