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?

Pyrethrin

It looks good when I view it in device mode in Chrome (v.65, 64-bit, on Mac). I tried 1024px width and 1280px width. It is blurry, however, when the zoom is anything except 100%. I noticed that Chrome changed my zoom when I'd change the device width. Can you confirm that your zoom is 100%? – Desperate

@Desperate yes, even with the zoom at 100%, it's still blurry, for example with 600 x 960. (Chrome, Version 65.0.3325.146 (Official Build) (64-bit) in windows) – Pyrethrin

If it looks good on actual devices, I would consider it a bug in Chrome and submit an issue for it. It is just a generic emulator after all and your QA would be done using real devices or through something reliable like BrowserStack. – Desperate

Have you fixed it? – Considered

Answer 1

Especially for me helped removing border-radius

Humid

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Parlor

I can't believe that this helped! thank you. – Maduro

Alternatively, it only does this for me with a percentage border radius. If I use a length value like 15px instead of 2%, the blurriness disappears. – Woodrow

Answer 2

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

Meiosis

Answer 3

Was having a similar issue with overflow: auto; (any value of overflow besides 'visible') and border-radius.

For Example, I had a similar structure.

<div style="
  border-radius: 10px;
  background-color: red;
  overflow: auto;
">
  Taken any random radius and background-color.
  Other elements in here.
</div>

My Solution:

Separate the border-radius and overflow properties and adjust other styles accordingly like this.

<div style"
  border-radius: 10px;
  background-color: red;
">
  <div style="
    overflow: auto;
  ">
    Taken any random radius and background-color.
    Other elements in here.
  </div>
</div>

Carburet

Answer 4

I found a solution using also height

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

Crowded