我在 Chrome 浏览器中设置 div 的背景时遇到问题。如果你看到,我有一个我没有实现并给出样式的浅灰色小框。它随机出现并随心所欲地移动和 reshape 形状。它不会发生在 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
最佳答案
我也遇到了这个问题并发现了这个: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 团队修复,所以我决定不使用 hack。
关于javascript - Chrome 上的 CSS div 背景颜色错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39268675/