Question

这太令人困惑了。目前正在研究一个项目，当我受到这种打击时。

我在内容区域有一个背景图片，由background-attachment:local和background-position:bottom right定义。出于某种原因，当位于其上的任何元素以某种方式改变时（基本上任何导致重绘内容的部分），背景图像的相应部分在Chrome中被擦除，从而显示下面的普通背景颜色。尝试在Inspector中对此进行诊断是徒劳的，因为在编辑CSS值时按下箭头键会导致它重新计算背景图像，并且全部都会回来。

不幸的是，我无法提供一个小提琴，因为我似乎无法在不重新实现整个网站的情况下重现错误，目前这是不可能的，因为它处于私人alpha阶段。

这远不是我在Chrome中遇到的第一次重绘错误。例如，我所拥有的一个元素会通过将overflow从hidden更改为visible来显示“编辑”按钮，然后在鼠标离开时再次返回 - 在所有其他浏览器中这很好，但Chrome会将编辑按钮保留在那里，直到您滚动。

所以我想我的问题是：“之前有没有人听说过这样的问题，有没有办法强制在Chrome中重绘？”

Answer 1

在覆盖div的非常奇怪的情况下，我发生了类似的事情。它最初不会完全绘制div。如果我将它碾过它，那么它将部分地绘制鼠标所在的位置，如果我突出显示它，那么它将完成绘制整个元素。我的元素绝对定位。我也无法在小提琴中重现这个问题。

我知道这不是这里列出的确切情况，但我在寻找chrome中的重绘问题时发现了这个问题，尽管我至少会发布这个问题，因为它对我有效。

我会附加div：

document.getElementById(targetParent).appendChild(myDiv);

并强制重绘，就在我使用

之后的那一行

setTimeout(function(){ myDiv.style.zIndex = 6; },5);

z-index已经是5，所以我把它增加了一个。增加它会导致重绘。我知道你可能认为6修复了分层问题，但我尝试了它的基础级别为500，它仍然重现了同样的问题。我试过了$(myDiv).show().hide()，但没有强制重新绘制元素。

Answer 2

以下是我专门针对Chrome版本38使用的修补程序。

if (window.chrome && parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) === 38) {
  console.log('You are using chrome version 38.');
  window.setInterval(function() {
    $('body').css('overflow', 'hidden').height();
    return $('body').css('overflow', 'auto');
  }, 0);
}

希望这有帮助！

Chrome以某种方式擦除背景图片？

2 个答案: