iOS Safari：点击结束后点击突出显示（-webkit-tap-highlight）卡在屏幕上

Question

Pretty simple problem: my single-page app has the normal WebKit tap highlight on Safari, so a translucent gray box appears and disappears when you tap. This is normal Safari behavior and is desired.

Sometimes, on an iPad, the gray box appears but does not disappear; the button tap goes through and the effects of the button are performed as expected (say, changing route) but the gray box remains until you tap again.

The gray box is not in the DOM - I'm nearly certain that it's Safari's tap highlight and not something we have added.

Counteracting "sticky hover" with @media hover(hover) { hover styles here } does nothing, so I don't believe this is a sticky hover issue.

Disabling the tap highlight with -webkit-tap-highlight: transparent; fixes the problem by making all tap highlights go away. This is not a great solution. The desired behavior is to have the tap highlights, and have them behave correctly.

This is a relatively new problem, so I assume we did something to cause this behavior, but I can't figure out what. Any ideas?

Thanks!

Answer 1

We had a similar problem when opening a web view in our flutter app on IOS, The issue was caused by Wrapping our entire app in a gesture detector which caused the -webkit-tap-highlight to get stuck on screen.

Not sure what stack you're using but hopefully this helps you or anyone with similar issues get it resolved.