3

Well this is baffling. Currently working on a project, when I get hit with this.

I have a background image on the content area, defined with background-attachment:local and background-position:bottom right. For some reason, when any element positioned over it is changed in some way (basically anything causing a redraw of the content) the corresponding section of the background image is erased in Chrome, revealing the plain background colour beneath. Attempting to diagnose this in the Inspector is fruitless, as even pressing an arrow key when editing the CSS value causes it to re-calculate the background image and it all comes back.

Unfortunately, I am unable to provide a Fiddle as I can't seem to reproduce the error without re-implenting the entire website, which is not possible at the moment as it is in private alpha stage.

This is far from the first redraw error I've had in Chrome. For instance, one element I had would reveal an "edit" button by changing overflow from hidden to visible, then back again when the mouse went away - in all other browsers this was fine, but Chrome would leave the edit button there until you scrolled.

So I guess my question is: "has anyone heard of issues like this before, and is there any way to force a redraw in Chrome?"

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592

2 Answers2

0

I had something similar start happening to me in very strange situations of overlaying a div. It wouldn't draw the div entirely at first. If I moused over it, then it would partially draw where the mouse was, and if I highlighted it, then it would finish drawing the whole element. My element was positioned absolutely. I also could not reproduce the issue in a fiddle.

I know this isn't the exact situation lined out here, but I found this question when looking for redraw issues in chrome and though I would at least post this since it worked for me.

I would append the div:

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

and to force the redraw, right after that line I used

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

The z-index was already 5 so I increased it by one. Increasing it caused the redraw. I know you might think that 6 fixed the layering issue, but I tried it with a base level of 500 and it still reproduced the same problem. I tried $(myDiv).show().hide() but that did not force a redraw of the element.

Travis J
  • 81,153
  • 41
  • 202
  • 273
0

Here is a fix I used specifically for Chrome Version 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);
}

Hope this helps!

sturdynut
  • 628
  • 4
  • 7