search

ricardobalk / ricardobalk.nl

My personal website, made with Nuxt 3 (Vue 3), TypeScript & TailwindCSS
https://ricardobalk.nl
ISC License
0 stars 0 forks source link

Fix scrollbar / overflow #24

Closed ricardobalk closed 4 years ago

ricardobalk commented 4 years ago

When viewing my website, there was a horizontal scrollbar caused by (then) unknown overflow.

Current solution

overflow-x: hidden; was used to remove the scrollbar, as can be seen in https://github.com/ellipticcurv3/www/blob/30b927ff4df6e7b52d0a09738e7b03a181878b3a/src/.vuepress/theme/styles/index.styl#L11

Cause

It was actually caused by putting the width of the <html> element to 100vw, as can be seen in https://github.com/ellipticcurv3/www/blob/fcd4ee6435cf6fee2e9df71d3d162133bf9b9a5c/src/.vuepress/theme/styles/global/main.scss#L4

Better solution

Putting the width to 100% will remove the overflow, and then you will no longer need to hide the overflow. Besides that, overflow-x: hidden; causes additional problems. An example is that elements can't have position: sticky; when hiding overflow.

image

Time required: 5 min +/- 25% (3 – 6 min)

ricardobalk commented 4 years ago

Fixed in 731d766ce255e8c87affa4fee12c638999ba51fa + 2a27a9bbda8de673a68687aef753011b9e849462. Next time, please don't rebase the changes but use a merge instead. Rebase causes all individual branch commits to be added to develop, which is a bit overkill. Especially when commiting in one-change-at-a-time style, like here.