DEV Community

Discussion on: What CSS tip do you want to share with others?

Collapse
 
robbiegm profile image
RobbieGM

Remove some stupid quirks in mobile browsers, particularly iOS Safari.

* {
  -webkit-tap-highlight-color: transparent:
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
adrianmarkperea profile image
Adrian Perea

Which kinds of quirks, Robbie?

Collapse
 
robbiegm profile image
RobbieGM

The first rule removes the annoying tap highlight when you click on anything, which is blue on Android and gray on iOS Safari. The second rule makes it so any scrollable element positioned absolutely or fixed still scrolls normally rather than in a weird way where there is no momentum. The last rule prevents double tap to zoom, so that browsers don't wait 300ms after clicking on a button to make sure the first tap wasn't just part of a double tap gesture.

Thread Thread
 
adrianmarkperea profile image
Adrian Perea

Thanks for the info!

Collapse
 
calag4n profile image
calag4n

Didn't knew that ones, thanks 👌

Collapse
 
_lexedwards profile image
Alex Edwards

Always check for IOS quirks! Biggest pet peeve is that all browsers in IOS are using Safari's rendering engine (AFAIK), and Safari has it's moments of implementing 90% of the ruling and then deviating from the 10%