Scale animation with CSS Grid causes pixel gap issues
I have a weird one for you all... it seems that animating the scale while using CSS grid, causes the browser not to calculate the widths quite properly and if you have a 1px gap between the grid items the gap will come in and out as you resize the window
You can see it in action here: https://codepen.io/LanFeusT/pen/RwzGVWK try resizing the browser window and you'll see the grid at the top which has the entrance animation will have the
gap: 1px come in and out whereas the bottom one the gap is always visible
Outside of animating something else than scale (translate for example) I don't really see another solution?
5 Replies
I added
gap:2px; and it seems to fix it I have no idea why that happened I also changed grid-template-columns:repeat(4, 1fr);I don't see any problems on my computer when using 1px, but if I use 0px, gaps will sometimes appear where they shouldn't.
@althepal78 if I use
gap: 2px the line is always present indeed, but I also see it change from 1px to 2 px occasionally, so it's doing the same behaviour
@Chooβππππ interesting, that sounds like the same problem as when I use 2px and sometimes only see 1px
Still... overall I don't understand why this is happening only when the scale transform is on it, it doesn't happen with translateI only see it with 1px
so strange ^^