overflow: clip
Tags: css
Published: 2022-07-03 10:06:28

This is a new-to-me value for overflow. It doesn't have massive support at the time of writing, but it did exactly what I needed it to, on the browsers I needed it to. Let me explain.

## The problem

I have a site with a header that has `position: sticky` on it. If your browser is wide enough then on the header there's a button you can press and a div flies in from the right. There's an `overflow-x: auto` on the body, so when the button is not pressed it's invisible.

A big enough tablet in landscape is wide enough to have this button. And in Android, you can scroll right and see the div that's not supposed to be visible until you press the button (because it's been transformed to the right).

## The possible solutions

After some googling I found a suggestion to add another div parent to the header with `overflow-x: hidden` on it. Which fixed the problem. Except then the header was no longer sticky. The problem with sticky positioning is that it doesn't work if there's an overflow further up the tree. So the solution is to remove the `overflow-x: hidden`...

The other solution to that is to make the header fixed. Which then means adding a margin so the content is not underneath it. The margin has to be as tall as the header, which requires JavaScript. I started down that path but thought there must be an easier way, because this is adding complexity. Which means I might have fixed a problem on one device by introducing a problem on other devices.

## The actual solution

The first solution I tried was to add another div parent to the header with `overflow-x: hidden` on it. I said above that sticky positioning doesn't work if there's an overflow further up the tree. But that doesn't apply to `overflow: clip`. All I had to do was to add `overflow-x: clip` to that parent div and it meant you could no longer scroll right on Android, and `position: sticky` worked on the header without introducing any new problems on any other browsers.

## What is `overflow: clip` anyway?

It looks as if it works exactly the same as `overflow: hidden`. The difference is that you can use JavaScript to scroll something with `overflow: hidden`. You can't if it has `overflow: clip`. Since I didn't need to use JavaScript to scroll, it didn't make any difference to me, aside from solving the `position: sticky` problem.

Browser support is currently at 73%, but it looks like Safari will get it soon and then that number will shoot up. The important part to me is that it works on Android browsers (apart from a few small ones used by a tiny number of people for which overflow: hidden also doesn't work, so the people using those browsers will be used to funky things on websites).

For the non-Android ones that do support it, it makes no difference. The `overflow-x: hidden` I had on there was already working, so adding an `overflow: clip` didn't stop it from working.

For the browsers that don't support it (eg everything on iOS) then they'll just ignore it. Which is fine because they don't need it anyway. I could use the `@supports` rule to only apply it to browsers that support it, but that's just adding complexity when it's not needed.