4 ms·

Sure, when I open the page in my browser window (1223px), I have left and right sidebars. Now I zoom in so the font is a size that I like (new viewport is 980px

Sure, when I open the page in my browser window (1223px), I have left and right sidebars. Now I zoom in so the font is a size that I like (new viewport is 980px) and I only have a right-hand sidebar. So far so good. Except, if I refresh the page, now the right hand sidebar goes away for some reason. Zooming back out now results in the right-hand sidebar appearing but the left-hand sidebar staying hidden. So there's some weird inconsistency in the layout, but the upshot is if I bookmark the page and return to it (or open a link in a new tab), I don't get a right-hand sidebar. If I did get a sidebar, I'd prefer it to be the left-hand sidebar than the right-hand sidebar, but that's more personal preference.

squidfunk 5y ago
Just to clarify: the left-hand sidebar is the navigation, which collapses into the drawer behind the hamburger menu icon on breakpoints below 1220px. The right-hand sidebar is the table of contents which lists all anchor links specific to the page. > Except, if I refresh the page, now the right hand sidebar goes away for some reason. That is very weird and not intended. I just tried to reproduce the behavior (macOS, Chrome), but to no avail. If you have the time, it'll be great to have an issue with steps to reproduce (and possibly a screen capture), so we can fix it!
- CGamesPlay 5y ago
  You know, I just tried and can't reproduce in Chrome either. I'm able to reproduce in Safari, and now having successfully nerd-sniped myself I'm pretty confident it's actually a bug in Safari. The `@media screen and (min-width: 60em)` doesn't update its definition of an `em` when the page is zoomed in or out, so zooming the page gives more pixels for the "min-width" part, but the "60em" is still being treated as the original zoom level.
  - squidfunk 5y ago
    Jup, that's sadly a still unfixed bug in Safari [1]. Super annoying, but if we would use px for media queries, we would have to swap out all rem units with px, thus not respecting your default font size. [1]: https://adamwathan.me/dont-use-em-for-media-queries/ https://adamwathan.me/dont-use-em-for-media-queries/

squidfunk 5y ago

Just to clarify: the left-hand sidebar is the navigation, which collapses into the drawer behind the hamburger menu icon on breakpoints below 1220px. The right-hand sidebar is the table of contents which lists all anchor links specific to the page. > Except, if I refresh the page, now the right hand sidebar goes away for some reason. That is very weird and not intended. I just tried to reproduce the behavior (macOS, Chrome), but to no avail. If you have the time, it'll be great to have an issue with steps to reproduce (and possibly a screen capture), so we can fix it!

CGamesPlay 5y ago
You know, I just tried and can't reproduce in Chrome either. I'm able to reproduce in Safari, and now having successfully nerd-sniped myself I'm pretty confident it's actually a bug in Safari. The `@media screen and (min-width: 60em)` doesn't update its definition of an `em` when the page is zoomed in or out, so zooming the page gives more pixels for the "min-width" part, but the "60em" is still being treated as the original zoom level.
- squidfunk 5y ago
  Jup, that's sadly a still unfixed bug in Safari [1]. Super annoying, but if we would use px for media queries, we would have to swap out all rem units with px, thus not respecting your default font size. [1]: https://adamwathan.me/dont-use-em-for-media-queries/ https://adamwathan.me/dont-use-em-for-media-queries/