JavaScript Grey background on IOS when clicking

[hebrerillo]

Hello there!!

When I click on an absolute positioned div on IOS (Safari), there is a flash of a grey background.

This is a video the example: Screen Recording 2025-04-10 at 09.23.30.mov

And this is a code pen with the example code: https://codepen.io/hebrerillo/pen/RNwzKXx

However, if the div is not absolute positioned, the grey background flash is gone.

How can I fix this??

I read that '-webkit-tap-highlight-color' can fix the issue, but after reading the MDN doc that it is not a standard feature and should not be used in production.

Thank you!!

 

[Johna]

Hey there,

The Safari Web Content Guide specifies that this property can be used to disable the text highlighting, so you should be fine with setting -webkit-tap-highlight-color: transparent; on the element.

Although this property isn't a standard, the highlighting also isn't and I believe the property should be supported by browsers that have the highlighting (i.e. Safari).

 

[hebrerillo]

Hey there,

The Safari Web Content Guide specifies that this property can be used to disable the text highlighting, so you should be fine with setting -webkit-tap-highlight-color: transparent; on the element.

Although this property isn't a standard, the highlighting also isn't and I believe the property should be supported by browsers that have the highlighting (i.e. Safari).

OK, so it seems a safe feature to use. Thank you so much!