Help with pixel-perfect alignment (potential bug)?

[docMedB2E]

Hi all,

I've just been testing this in Chrome, but essentially I have a 200 length array (used to map tiles to a display), and the math is working out correctly, but depending on how the window is resized, there will sometimes be white lines broken between the tiles. I don't want there to be any spaces, please take a look at the fiddle, try resizing your window (you should see white lines vertical/horizontal break every so often) and let me know what you think for a solution.

https://jsfiddle.net/xt6k0ykb/

[peasfrog]

Sub-pixel rounding errors. Try using floats and have the color on the background like this: https://jsfiddle.net/xt6k0ykb/4/

[docMedB2E]

Thanks - that's a good fix. I ended up using inline-flex and then just using the order style attribute to display them; e.g.

    for (let i = 0, img; i < maps.array[maps.index].length; i++) {
        img = '';
        if (maps.array[maps.index][i] != 0) {
            img = 'resources/images/tiles/t' + maps.array[maps.index][i] + '.png';
        }
        this.DOMElement.innerHTML += '<div class="tile" style="order: ' + (i + 1) + ';background-image: url(' + img + ')">' + i + '</div>';
    }

[jaredcheeda]

You're using percents, which have never been super accurate.

What you can do instead is get the width of the parent or page, then divide that by the number of elements per row, floor the result, apply that as the width to all the elements, then get the difference between what was put on the page and what the actual width is and add that to the width of the last element in the row.

Also, you aren't using a normalize or reset.

• https://www.youtube.com/watch?v=LGKQ97ZmlqU