Unexpected gaps between 3D CSS elements in Chrome

I’m working on a project which requires using CSS to position elements in a 3D space. Today, I discovered a bug that causes 3D elements to have little gaps between them in Chrome. Sigh — here we go again.

Ryan Williams
Apr 17, 2018 · 2 min read

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.


Problem

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:

Safari v11.1 (macOS)

Looks great! Just what I was looking for. But throw it into Chrome and we get this slightly less elegant outcome:

Chrome v65 (macOS)

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.

Solution

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 backface-visibility to 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 margin.

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.

10

10 claps
Ryan Williams

Written by

Developer and esteemed connoisseur of fine games