search

pmndrs / uikit

🎨 user interfaces for react-three-fiber
https://pmndrs.github.io/uikit/docs/
Other
2.6k stars 135 forks source link

Input element causes gap to appear at bottom of page (Firefox) #95

Closed mrxz closed 3 months ago

mrxz commented 3 months ago

When using an Input element, a hidden <input> element is created and added to the body. This works fine under Chrome/Chromium based browsers, but in Firefox this results in a gap appearing at the bottom of the page, as the hidden <input> element does still take up space.

This appears to be caused by the fact that the default browser style for <input> elements differ between the browsers. Chrome has display: inline-block whereas Firefox uses display: block. A simple solution would be to also set the display style explicitly ensuring it's unaffected by browser style (here: https://github.com/pmndrs/uikit/blob/main/packages/uikit/src/components/input.ts#L369-L374) EDIT: Turns out the different display type wasn't the cause

Can be reproduced using the auth example: https://pmndrs.github.io/uikit/examples/auth/

mrxz commented 3 months ago

I've created a PR with a potential fix #96. While the display type does differ between FF and Chrome, it didn't actually cause the issue. I wasn't able to identify the actual cause, as the styling seems virtually identical between both browsers. As a workaround the PR uses the top style property to ensure the hidden input element is out of the way and doesn't cause a gap at the bottom of the page.