Selectbox options are blurry in sidebar

🎈 Using Streamlit
1

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

2

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:

3

Did you try zooming in and out?

4

Yes, I did

5

Do you have colleagues who could test on Windows?

Also, I experienced this issue about 1.5 years ago too

6

No noticeable blurriness here either.

On Debian + Firefox (zoom 90%):

image
image745×446 7.93 KB

On Windows + Firefox (zoom 90%):

image
image843×633 5.03 KB

1 Like
7

90% on edge for me, Windows 10 Enterprise
image

Firefox 90% actually isn’t blurry
image

Have you tried Chromium on Windows?

8

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

9

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.

10

It does look blurry on Edge (Win11):

At 90%
image

At 67%
image

1 Like
11

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

image

1 Like
12

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

13

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/

14

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.