This is about positioning absolute elements, preserving vertical scroll but avoiding horisontal.
As seen here, I have a section with an absolute element in the background. The absolute consists of a wrapper and an HTML embed. With overflow: hidden, the element gets clipped in the section, as shown with the red lines in this image.
Overflow-x: hidden and overflow-y: visible creates a vertical scrollbar inside the element. This is silly. Reading up on the problem many seem to have encountered the same, but I haven’t come across a good solution.
- Adding overflow-x: hidden to body instead. This kills stuff like sticky elements and prevents scroll in Safari.
- Adding overflow-x to sections. Creates vertical scrollbars too
- Overflow-x: hidden
- Overflow-y: visible
- No scrollbar in that element
- Absolute element doesn’t clip inside the section but can freely be moved up and down behind the previous and next section