Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS div background-color bug on chrome?

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.

Chrome bug print-screen

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

like image 981
MiguelVeloso Avatar asked Sep 01 '16 10:09

MiguelVeloso


People also ask

Why is my background color not showing up CSS?

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…

Why is my div background image not showing?

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.

How do I fix the background color in HTML?

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.


1 Answers

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.

like image 113
katy lavallee Avatar answered Nov 03 '22 01:11

katy lavallee