Selectbox options are blurry in sidebar

This one is very easy to replicate, just make a selectbox in the sidebar:

import streamlit as st

st.sidebar.selectbox("Pick an option", ["option 1111111111",
                                        "option 222222222"])

image

Zoom in and out to randomly change the blurriness. At 100%, there doesn’t seem to be much or any blurriness, which is good. I only noticed this because I happened to be at 90% zoom.
Viewing on Chrome, Win 10

Hi @kevinlinxc,

Thanks for posting!

I wasn’t able to reproduce this using Chrome on my Mac. This is what it looks like for me:
Screen Shot 2022-10-07 at 9.07.52 AM

Caroline :balloon:

Did you try zooming in and out?

Yes, I did

Do you have colleagues who could test on Windows?

Also, I experienced this issue about 1.5 years ago too

No noticeable blurriness here either.

On Debian + Firefox (zoom 90%):

On Windows + Firefox (zoom 90%):

1 Like

90% on edge for me, Windows 10 Enterprise
image

Firefox 90% actually isn’t blurry
image

Have you tried Chromium on Windows?

@kevinlinxc Seems like this might be specific to your machine’s display settings potentially?

I’ve switched computers since the first time I’ve seen this bug, so I think it is something else. I can try something like Sauce Labs live testing to see if I can reproduce the bug off my computer.

It does look blurry on Edge (Win11):

At 90%
image

At 67%
image

1 Like

Probably an Edge issue, here is a side by side comparison with Firefox (both on Win 11 at 67%)

image

1 Like

You guys haven’t mentioned trying Chrome on windows yet, does that also have this problem?

Best I can do is the Chromium that comes with Playwright (on Debian). Left is Firefox and right is Chromium and neither shows blurriness at 67%

image

My guess is that this is not related to streamlit because it seems that that blurriness has been an issue on windows for years.


Edit: a link with possible fixes: https://www.technospot.net/blogs/fix-blurry-fonts-problem-in-windows-10-browser-settings-apps-fonts/