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.
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
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.
overflow: clip anyway?
It looks as if it works exactly the same as
overflow: hidden. You can't if it has
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.