Some funkiness with iOS and CSS


The Setup

I wanted to add a Videos section on my website, to link the videos that I’ve been doing, and hopefully will continue doing. But once I did, I realized that the space for mobiles was going to be a bit constrained. So time to do some funky dropdown, all on CSS because don’t want any JS on my site.

The Solution

So I found that CSS added a selector/pseudo-class called :focus-within. Perfect. Add some work with transformations, opacity, and visibility to create a nice smooth transition (he says with no clue whatsoever).

But, my phone is an iOS. And I found out that :focus-within doesn’t just work.

The Other Solution

Stack overflow came to the rescue, thanks to user Charlie, this seems to be the answer. Adding tabindex=0 to the elements (span and a in my case) iOS seems to respond to the touch. Very strange. I’m gonna have to investigate the why. But wanted to have this one out for future reference for myself.

Return to Index

Unless otherwise stated, all posts are my own and not associated with any other particular person or company.

For all code - MIT license
All other text - Creative Commons Attribution-ShareAlike 4.0 International License
Creative Commons BY-SA license image