Hi campers, I’m facing an annoying problem. I’m trying to have an element in the grid expand to twice its width on hover. I achieved that much, by using CSS transform property. Problem is, for some strange reason the expanded element moves either up or down 1 pixel, depending on viewport height - this looks ugly and is just maddening. Why is this happening? I’m only telling it to change size on X axis, so its height should stay the same, right? I’m attaching a codepen, and would appreciate your help. If it looks fine to you, try resizing the window a few times and check again.
i can’t tell that the green center element is changing height at all from my perspective.
How did you determine that its height changes?
I’m not 100% sure it’s the height, could be position I guess, but the point is there is a 1 pixel gap or overflow there after animation is done playing. As I said, it doesn’t appear on all viewport heights, you may have to try few different ones to see it. Here is the type of issueI mean (in the first one it’s shorter by 1 pixel, in second one it’s 1 pixel higher, encroaching on the grid-gap (may be harder to see):
I’m “sorry” to say it works perfectly for me on every size I tried it on! (the border is perfectly displayed no matter what I do)
(I tried full screen , half screen, very narrow screen and anything else I could think of)
Now I am using the latest version of Chrome… so perhaps some browsers (assuming yours is either different or older than mine) may have a bug in the implementation? You could try to google for this issue to see if anyone has reported it for the specific browser.
Huh. Well that’s…sort of reassuring, I suppose. Thanks for trying it 
Still, it’s driving me nuts, especially since I also have the latest chrome (68.0.3440.75). Actually, I’m also getting this issue on firefox, so I know it’s not a chrome problem. May be my laptop problem?
that’s just weird! I don’t see how the laptop plays into this…
I see your problem in my browser, well, when i change the grid-gap to 2px it seems fine, but on 1px the hover makes the width grow extra along y-axis.
Aha. For me it’s also happening with 2px gap (on some view-port heights). I even tried a responsive grip-gap, 1vmin, still same problem. Doesn’t look like grid-gap issue at all. I commented grid-gap out and the element still managed to shrink in height:
I can recreate your problem on Chrome.
Funny things happen, when I play around with Chrome Zoom,
then some Grid lines are randomly drawn and your Pixel Shift also happens randomly.
fyi, my original setup was 100% zoom and I tried 110% and 120% and still everything behaves perfectly for me…
I see, my zoom is also 100% Looks to me like the problem is with relative units. When I give divs a static height of 200px, everything works fine on any viewport height. But that would break responsiveness. Later I’ll probably give stack overflow a shot and if no one has the solution then report it somewhere.