Materialize: Gray overlay on collapsible element on iOS on click

[chris-ti8m]

Description

I have noticed a gray overlay over the collapsible element on iOS. The overlay does not appear with every click. The overlay remains for a short moment and then disappears. On desktop browsers like Chrome or FireFox, there is no such overlay present.

Repro Steps

GoTo collapsible site on materializecss.com on an iOS device. Open and close the collapsible element several times. You may notice the gray overlay, which appears for a split second over the element.

[DanielRuf]

Sounds like the -webkit-tap-highlight-color issue.

Can you make a codepen and add the code

-webkit-tap-highlight-color: rgba(0,0,0,0);

so we can have a reproducible test and fix this?

See https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/

[chris-ti8m]

Hi Daniel
It is indeed the -webkit-tap-highlight-color. Thank you very much for your support!

[DanielRuf]

@fega do we have a PR which fixes this? I am not sure anymore.

[DanielRuf]

@chris-ti8m please reopen until this is also fixed in the master branch.