I'm having trouble setting the background of a div in Chrome Browser. 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.
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):
.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). I have a screen recording also for you to see: https://drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing
that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…
you have to change your path background-image: url('/ximages/websiteheader1. png') ; TO background-image: url('ximages/websiteheader1. png') ; actually, remove the first / from the path of the image.
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
I'm also having this problem and found this: http://www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome
Tried the solution... -webkit-transform: translate3d(0,0,0);
in the rule where I specify background-color
(body
, in my case) and that worked. Still looking for a better solution.
UPDATE: Looks like this is a Chromium bug. If you want to solve it for all your visitors, the hack above seems to work. If you want to solve it for just you, you can go to chrome://flags/#enable-gpu-rasterization
and enable GPU rasterization. I imagine this bug will be fixed by the Chrome team soon enough, so I decided not to use the hack.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With