CSS div background-color bug on chrome?

Question

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

Answer 1

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.

Answer 2

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. Your transparency has to be > 0 for the hack to work. I set mine to 0.01 and it does the trick (ie rgba(240, 240, 240, 0.01).

Answer 3

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