Detect IOS device by CSS

Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn’t. You can add it back with a special property

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices only */ 


It works because only Safari Mobile implements -webkit-overflow-scrolling

Please note that @supports does not work in IE. IE will skip both of the above @support blocks above. To find out more see It is recommended to not use @supports not because of this.

Leave a Reply

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages