Weird 100vh issue on firefox

I'm working on this site: https://natasha-macvoy.netlify.app and when I checked on firefox the nav is all wrong. It's working fine on all other browsers. The nav has a top bar and a bottom bar, the bottom bar should be fixed to the bottom of the page, with the whole nav staying fixed on scroll. The nav is set to 100vh. I've tried it with the children set to relative/absolute positioning and it fixes the positioning of the bottom bar but the nav parent still doesn't stay fixed on scroll. I found a couple issues with this but none of the solutions seem to work for my issue: https://stackoverflow.com/questions/21440604/css-position-fixed-acting-like-absolute-in-firefox and https://bugzilla.mozilla.org/show_bug.cgi?id=1418866
Home | Natasha MacVoy
Natasha MacVoy explores ideas and motifs that relate to invisible labour, care and neurodiversity, through playful use of doubling, repetition and considered use of close-at-hand materials.
Stack Overflow
CSS - "position: fixed" acting like "absolute" in Firefox
I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute. #navigation { display: block; w...
1418866 - In Firefox position:fixed does not work inside elements w...
RESOLVED (nobody) in Core - Layout. Last updated 2017-11-20.
2 Replies
Jono Lewarne
Jono LewarneOP3w ago
Figured it out, it was this in the css file:
@property --scrollbar {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}
html {
container-type: inline-size;
}
@property --scrollbar {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}
html {
container-type: inline-size;
}
clevermissfox
clevermissfox3w ago
Yeah it’s not recommended to make the html a container ; Miriam Suzanne has a blog post explaining why but I can’t seem to locate it . I’ll keep looking though
Want results from more Discord servers?
Add your server