select 元素的下拉菜单正在更改页面的背景（JS，MUI）

Question

I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using. Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image. At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.

Example:

1. My site: https://dinsangun.github.io/crypto-converter/
2. The lib docs: https://mui.com/components/selects/ (In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)

Is there a way to overcome this little bug?

Thanks.

Answer 1

Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen. It's the same problem for MUI website. One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;