CSS div背景色のバグ？

Question

Chromeブラウザでdivの背景を設定できません。あなたが見ていると、私は実装してスタイルを与えていない小さな明るい灰色のボックスがあります。それはランダムに表示され、必要に応じて動き、変形します。それは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 { 

     } 
    } 
} 

私は「レジスタ答えは」クラスのbackgound色を設定していますが、私は、すべてのdivと問題にしようとした私は、次のコードを持っています常に同じです（クロムでのみ発生します）。 https://drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing

Answer 1

試みは、背景色を追加：あなたは灰色の背景をご希望のdivの上に透明で、私もこの問題を抱えて、見つかったんだ

Answer 2

に表示する 私はあなたが見ることのためにも、画面の記録を持っていますこれはhttp://www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome

私はbackground-color（私の場合はbody）と指定されたルールで解決しようとしました。それでももっと良い解決策を探しています。

更新日：これはChromium bugのように見えます。あなたのすべての訪問者のためにそれを解決したい場合は、上記のハックが機能するようです。あなただけのためにそれを解決したい場合は、chrome://flags/#enable-gpu-rasterizationに移動し、GPUのラスタライズを有効にすることができます。このバグはすぐにChromeチームによって修正されると思いますので、ハックを使わないことにしました。

Answer 3

私は同じ問題に取り組んできました。

背景色が適用されている要素に罫線を追加すると、ライトボックスが消えてしまうことに気付きました。

デザインに影響しない場合は、背景と同じ色の枠線を追加することをおすすめします。あなたのケースでは

：

.col-lg-6.register-answer { 
    border: 1px solid #adadad; 
} 

それとも、あなたは背景クリップと（ほぼ）透明な背景冒険しようと感じている場合：パディング・ボックスをオンにします。あなたの透明度は、ハックが機能するために> 0でなければなりません。私は鉱山や0.01を設定し、それはトリックです（すなわち、rgba（240,240,240,0.01））