Problem with height of <select> in Safari

Question

Problem with height of <select> in Safari

vhanadium opened this issue 3 years ago · 4 comments

I have a that I hide with select { height: 0; overflow: hidden; opacity: 0; pointer-events: none; } But the height didn't apply until I add this : select {white-space: pre;}

Answer 1 · 2022-03-17T05:16:57.000Z

Please add CodePen example and which version of Safar you are using.

I try to create your bug, but I didn't see any special thing.

Answer 2 · 2022-03-17T11:23:45.000Z

hi here is an exemple: https://codepen.io/vhanadium/pen/rNpxVrM. You'll notice that the space of the select is still there. In my dev the word-space: pre did the trick but on codeine no that's strange.

Answer 3 · 2022-03-17T12:46:43.000Z

First, it isn't a bug of the CSS reset. Because with or without it works the same.

Second, the line-height is why you see the space, not only in Safari but also in all browsers.

If you want to remove the spacing, you need to reset line-height of the container to zero. I can't see the reason to do so, but you can.

I'm closing the issue. It isn't a bug of the CSS reset.

If I miss anything else, feel free to comment.

Answer 4 · 2022-03-17T16:45:15.000Z

Yes my bad I thought it was a CSS Reset problem cause revert workspace solved the problem. Your solution doesn't work too. The only way is to make the select a display block. and yeah not a problem created by the reset.