Gray square effect when pressing a HTML element on IPhone

On the following code I have the Ionic 4 component: Range.

JSFiddle source:

Direct result:

Source code:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src=""></script>

  <ion-range mode="ios" min="0" max="120" pin="true" value="60"></ion-range>


In desktop browsers it is fine. Also, on Android browsers it is fine.

But on IPhone (real device) browser (for example: Chrome), when you press the handler, there is one gray square that shows up as you can see on the following image:

enter image description here

I want to prevent that because it doesn’t look good.

In the other hand, if you go to this demo:

and press the handlers you don’t get that gray square.

Any idea on how to prevent this?


Looks like something which may need to be reported as an issue I would say

Do you open one and link it here?