Update (April 23rd, 2018)
I discovered that instead of using an
outline to combat this issue, it’s possible to use a negative
margin. This achieves the same visual look but without the substantial frame rate hit. I’ve updated the post accordingly.
Essentially, I want to create what looks to be a single, flat surface but actually it’s comprised of numerous squares. Why on earth am I doing this? Well, that’s a story for another day.
To achieve this effect, I’ve implemented a CSS Grid Layout with boatloads of squares all given the same
background, and then used
transform to rotate them into an isometric perspective. This is what it looks like in Safari:
Looks great! Just what I was looking for. But throw it into Chrome and we get this slightly less elegant outcome:
Oh dear. Not only do all of my elements have gaps between them, the rendering is also inconsistent. In some cases the gaps are more pronounced, while in others they’re less so or missing altogether.
I’ve reported this as a Chromium bug, so hopefully we’ll see it rectified in an upcoming version of Chrome. The bad news is that it also happens in Safari when you zoom in, and who knows when that might be fixed. As for other browsers, I haven’t looked into it yet.
After a fair bit of messing around I’ve determined that the following properties combined can mask the issue and give us the perfectly smooth surface we’re looking for:
backface-visibility: hidden; margin: -1px;
For whatever reason, setting
hidden both reduces the gap and makes it consistent. However, to get rid of it entirely we must make each box a bit larger than normal — so they slightly overlap—with a small negative
Alternatively, you can use a small
outline to achieve a similar effect without changing the dimensions of your elements, but for some reason this causes significant performance loss so I don’t recommend it unless it’s essential to not mess with the element size.