You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When triggering a modal, HeadlessUI is setting position to fixed on <html>. For reasons I cannot understand, this triggers an unavoidable gap at the bottom of <html> between bottom: 0px; and the bottom of the screen.
The blue box is a div that is position: absolute; and bottom: 0px.
With html as position: fixed
With html as position: static
I've tried numerous things to try and remove the gap. The only thing that seems to work is set position: static !important; to <html> but that does also conflict with the scroll locking that HeadlessUI is trying to do.
I've confirmed that rolling back to v1.7.0 stops setting position: fixed on <html> which removes this issue.
The text was updated successfully, but these errors were encountered:
I'm noticing similar behavior - in my instance, I'm using @headlessui/react to put a Dialog over a Mapbox map. In v1.7.1 and later, the added position: fixed on <html> from #1830 stomps on most of my map display, as shown here:
v1.7.0
v1.7.1 and later
Map still visible under the backdrop
Map is not visible (with 0 height) under the backdrop
I'm also more than happy to get a basic reproduction code snippet extracted if it would help!
What package within Headless UI are you using?
For example: @headlessui/vue
What version of that package are you using?
For example: v1.7.3
What browser are you using?
For example: Safari (iOS PWA Full Screen)
Reproduction URL
I can work on one if needed.
Describe your issue
When triggering a modal, HeadlessUI is setting
position
tofixed
on<html>
. For reasons I cannot understand, this triggers an unavoidable gap at the bottom of<html>
betweenbottom: 0px;
and the bottom of the screen.The blue box is a div that is
position: absolute;
andbottom: 0px
.With
html
asposition: fixed
With
html
asposition: static
I've tried numerous things to try and remove the gap. The only thing that seems to work is set
position: static !important;
to<html>
but that does also conflict with the scroll locking that HeadlessUI is trying to do.I've confirmed that rolling back to
v1.7.0
stops settingposition: fixed
on<html>
which removes this issue.The text was updated successfully, but these errors were encountered: