chrome上的CSS div背景颜色错误？

Posted 2023-02-22

【中文标题】chrome上的CSS div背景颜色错误？

【英文标题】：CSS div background-color bug on chrome?

【发布时间】：2017-01-09 04:04:10

【问题描述】：

我在 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 />
       </div>
   </div>
</div>

已编辑（CSS 类）：

.col-lg-6.register-answer 
    background-color: #adadad;
    .compet-content 
        width: 100%;
        height: 100%;
        input 

        
        button 

        
    

我在 'register-answer' 类上设置了背景颜色，但我尝试了每个 div，但问题总是相同的（它只发生在 chrome 上）。 我也有录屏给你看：https://drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing

【问题讨论】：

你能做一个jsfiddle吗？

@devnull69 我正在使用 react，你可以在我的标签上看到。

@BrandonIbbotson 我编辑了问题并在那里编写了 css 类。

有什么问题..？

@chiragpatel 我会，但在 jsfiddle 上重现此错误并不容易，我尝试过使用相同的代码，但那里没有发生。

【参考方案1】：

尝试在您希望灰色背景出现的 div 上添加 background-color: transparent

【讨论】：

我只有一个 div 在具有背景颜色的 div （包含输入和按钮的那个）之上。我将其设置为透明的，没有任何改变。我已经尝试在其他div中设置背景，问题还是一样。

【参考方案2】：

我也遇到了这个问题，发现这个：http://www.parallaxinfotech.com/blog/addressing-css-artifacts-left-screen-chrome

尝试了解决方案...-webkit-transform: translate3d(0,0,0); 在我指定background-color（在我的情况下为body）的规则中并且有效。仍在寻找更好的解决方案。

更新：看起来这是Chromium bug。如果您想为所有访问者解决它，上面的 hack 似乎有效。如果你想为自己解决它，你可以去chrome://flags/#enable-gpu-rasterization并启用GPU光栅化。我想 Chrome 团队很快就会修复这个错误，所以我决定不使用该 hack。

【讨论】：

translate3d 确实有效！但它也恰好将所有位置：固定元素转换为位置：绝对，所以这对我来说毁了它。 Chrome，新的 IE6

非常感谢！我们正在把头发扯下来。

【参考方案3】：

我一直在处理同样的问题。

我注意到，如果您为应用了背景颜色的元素添加边框，灯箱就会消失。

如果不影响您的设计，我建议添加与背景颜色相同的边框。

在你的情况下：

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

或者，如果您喜欢冒险，请尝试使用带有 background-clip: padding-box 的（几乎）透明背景。您的透明度必须大于 0 才能使 hack 起作用。我将我的设置为 0.01，它可以解决问题（即 rgba(240, 240, 240, 0.01)。