Issue with element changing height without me asking it to

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 :slight_smile: 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% :slight_smile: 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.