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.
Top comments (0)