[英]CSS div background-color bug on chrome?
I'm having trouble setting the background of a div in Chrome Browser. 我在Chrome浏览器中设置div的背景时遇到问题。 If you see, I have a small lighter grey box that I didnt implement and give style.
如果你看到,我有一个小的浅灰色盒子,我没有实现并给出风格。 It appears randomly and moves and reshapes as it wants.
它随机出现,并根据需要移动和重塑。 It doesn't happen on Safari or on Firefox and I can't understand why or either how to fix it.
它不会发生在Safari或Firefox上,我无法理解为什么或如何解决它。
My problem is quite strange. 我的问题很奇怪。 I have the following code:
我有以下代码:
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>
Edited (CSS classes): 编辑(CSS类):
.col-lg-6.register-answer {
background-color: #adadad;
.compet-content {
width: 100%;
height: 100%;
input {
}
button {
}
}
}
I'm setting the backgound-color on 'register-answer' class but I tried at every div and the problem is always the same (it only happens on chrome). 我在'register-answer'类上设置了背景色,但是我尝试了每个div,问题总是一样的(它只发生在chrome上)。 I have a screen recording also for you to see: https://drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing
我还有一个屏幕录制供您查看: https : //drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing
I'm also having this problem and found this: http://www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome 我也遇到了这个问题并发现了这个问题: http : //www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome
Tried the solution... -webkit-transform: translate3d(0,0,0);
尝试了解决方案......
-webkit-transform: translate3d(0,0,0);
in the rule where I specify background-color
( body
, in my case) and that worked. 在规则中我指定
background-color
( body
,在我的情况下)和工作。 Still looking for a better solution. 仍在寻找更好的解决方案。
UPDATE: Looks like this is a Chromium bug . 更新:看起来这是一个Chromium bug 。 If you want to solve it for all your visitors, the hack above seems to work.
如果你想为所有访问者解决它,上面的hack似乎有用。 If you want to solve it for just you, you can go to
chrome://flags/#enable-gpu-rasterization
and enable GPU rasterization. 如果你想只为你解决它,你可以去
chrome://flags/#enable-gpu-rasterization
并启用GPU光栅化。 I imagine this bug will be fixed by the Chrome team soon enough, so I decided not to use the hack. 我想这个bug很快就会被Chrome团队修复,所以我决定不使用黑客。
I've been dealing with the same issue. 我一直在处理同样的问题。
I've noticed that if you add a border to the element where the background colour is applied, the light box disappears. 我注意到,如果在应用背景颜色的元素上添加边框,灯箱会消失。
If it doesn't interfere with your design, I would suggest adding a border that's the same colour as your background. 如果它不会干扰您的设计,我建议您添加与背景颜色相同的边框。
In your case: 在你的情况下:
.col-lg-6.register-answer {
border: 1px solid #adadad;
}
Or, if you're feeling adventurous try an (almost) transparent background with background-clip: padding-box. 或者,如果您喜欢冒险,请尝试使用background-clip:padding-box(几乎)透明背景。 Your transparency has to be > 0 for the hack to work.
您的透明度必须> 0才能使黑客工作。 I set mine to 0.01 and it does the trick (ie rgba(240, 240, 240, 0.01).
我将我的设置为0.01并且它可以解决问题(即rgba(240,240,240,0.01)。
尝试添加背景颜色:透明在您希望灰色背景出现的div上
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.