Kevin Powell - Community•4w ago

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 LewarneOP•4w 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•4w 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

Gaming

Programming

Weird 100vh issue on firefox