Chrome text blur with overflow-y:scroll and fixed height

Question

I have a custom dropdown with some text options, and I need to set a fixed height. Seems simple enough, I added max-height and overflow-y: scroll. It works great! but on Chrome on device mode, with big resolutions it blurs the text.

I made a pen that shows this. https://codepen.io/a40637francisco/pen/OvbNyB

It seems these 2 properties don't go well with chrome.

max-height: 100px;
overflow-y: scroll;

I've tried several fixes using translate, perspective, smoothing, but no luck. Any ideas?

Answer 1

I guess it has to do with the mobile screen resizing. Setting it to 100% fixed it for me. Hope it helped!