CODEWITHSUNDEEP
cssgoogle-chromecanvas
Sebastian Olsen
Sebastian Olsen

Reputation: 10888

Weird canvas rendering bug in Chrome

I'm using a canvas to render an image, and I'm experiencing this weird graphical bug appearing sometimes, which disappears as soon as I scroll.

This is part of a react component, you can see the code for it here.

enter image description here

After scrolling or triggering an update of some kind in the rendering process, it looks as it should:

enter image description here

This is what the CSS for my image looks like:

.async-image {
  position: relative;
  z-index: 1;
  background: black;
  overflow: hidden;
  transform: translateZ(0)
}

.async-image canvas {
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0)
}

.async-image .preload {
  position: absolute;
  transform: scale(1.2);
}

.async-image .preload.ready {
  opacity: 1;
}

.async-image .src {
  position: absolute;
  transform: scale(1.1);
}

.async-image .src.ready {
  opacity: 1;
  transform: scale(1);
}

.async-image img {
  opacity: 0;
}

Not sure what could be causing this, but there is an underlying canvas underneath as well on top of the main canvas, used to display a 10x10 blurred image of the source image, as a preloader. The image then zooms slightly in when it's ready.

This bug seems to trigger when I switch to another tab and then back also.

Upvotes: 3

Views: 1879

Answers (2)

Nick Ribal
Nick Ribal

Reputation: 2109

Looking at this issue and the one you linked to (about slow rendering), I'd try CSS filters as an alternative. Browser support is pretty good. If you need really wide browser support, you can use SVG filters.

Upvotes: 1

shramee
shramee

Reputation: 5099

deleted my old answer...

Sorry, Didn't read that it was caused on switching tabs...

document.addEventListener('visibilitychange', function(){
    // Add code to re render the canvas or repaint...
    // You can even try using window.scrollBy(0, 1); here ;P
})

This might be happening to prevent spending resources on unfocussed tabs by chrome...

If you wanna know inspect painting and FPS meter etc... Important for web animation... Enable it in chrome dev tools like this...

Inspecting rendering in chrome

Hope that helps...

Upvotes: 1

Related Questions