htmlcssgoogle-chrome

Chrome puts breaks between image tiles at different zoom levels

I speculate this is some internal rounding error scenario in chrome resulting in placement being off by one. I have a visual that is made of image tiles. They usually display fine, such as the following. enter image description here But if the user zooms in or out, at some zoom levels breaks show between the tiles.

enter image description here

These two images were taken from the exact same web page in the exact same session.

The images are loaded as backgrounds for divs. The divs are explicitly set to be the same size as the source image. Three of the tiles that are side-by-side that render with a break have the following HTML

.image-chunk {
    position:absolute;
    background-size: auto;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

<div class="image-chunk" style="width: 2300px; height: 1253px; padding: 0px; margin: 0px; left: 2300px; top: 2300px; background-image: url(/images/map1layer1/map1layer1_1_1.png); background-size: contain;"></div>
<div class="image-chunk" style="width: 2300px; height: 1253px; padding: 0px; margin: 0px; left: 4600px; top: 2300px; background-image: url(/images/map1layer1/map1layer1_2_1.png); background-size: contain;"></div>
<div class="image-chunk" style="width: 833px; height: 1253px; padding: 0px; margin: 0px; left: 6900px; top: 2300px; background-image: url(/images/map1layer1/map1layer1_3_1.png); background-size: contain;"></div>

I've tried tiles of different sizes (256x256 being the smallest). No size is immune to this effect. When CSS animations occur, the effect is more noticeable since it comes and goes from frame to frame, resulting in those breaks flashing on the screen.

I can't use the original image in its complete form because Chrome will deallocate the image resource if an image is larger than a certain size and passes outside the visible window. This causes significant stuttering in CSS animations when something animates out of view and then back into view, since Chrome stops processing animation frames to re-decode the image again.

Any idea how to prevent the break in tiles from happening?

Solution

  • The issue is that you are using images that have an odd number of pixels for width and height.

    This results in the browser trying to render your image with a fractional pixel size at certain zoom levels. This causes exactly what you're seeing here.

    Remake your images so that the each dimension is an even number.

    With fractional pixels, you're going to end up with issues like this no matter how many CSS properties you try to throw at it.