mirror of
https://github.com/caddyserver/website.git
synced 2025-04-24 05:56:15 -04:00
e03cbec7c4
On Firefox, we were seeing an extra large horizontal scrollbar. Didn't happen on Chrome though. I think it's an edgecase bug with Firefox... but I think we can take a better approach that can avoid it anyways. The CSS for `paper` classes was set up so that they would stack/overlap onto eachother. It was using `left: -100%;` and `left: -200%;` on `paper2` and `paper3`, to stack the next two on top of the first one, all three being relative positioned. The problem comes because I think Firefox calculates the scrollbar width before relative positioning calculations come into play, so because the elements were rendered way off to the right before being moved over, it would "grow" the page really wide. Go to https://caddyserver.com/docs/ on any browser, element inspector, find `#paper2` and `.paper3`, uncheck the `left` CSS prop on both of those. You'll see that they render over to the right. An alternate way to do the same thing is to use negative margins to stack the elements. I think margins are calculated earlier, so on Firefox this doesn't cause a scrollbar problem. I did need to use a `calc()` unfortunately to get it pixel-perfect positioning compared to how it was before, because `#paper1` has `margin-left: 20px` and then `#paper2` inherits that margin so it needs to remove the extra 20px to realign. `calc()` is cheap though. It's fine. Also, need `z-index: -1;` to make sure the BG papers go behind the page content. |
||
|---|---|---|
| .. | ||
| account | ||
| asciinema-player-2.6.1.css | ||
| business.css | ||
| chroma.css | ||
| common.css | ||
| docs-json.css | ||
| docs.css | ||
| download.css | ||
| home.css | ||
| v2-landing.css | ||