Gray square effect when pressing a HTML element on IPhone

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

JSFiddle source:

https://jsfiddle.net/681539w0/

Direct result:

https://jsfiddle.net/681539w0/embedded/result/

Source code:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>index-ionic.html</title>
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
</head>
<body>

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

</body>
</html>

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:

https://beta.ionicframework.com/docs/content/component-preview-app/docs-www/?ionic:mode=ios&ionic:statusbarPadding=true#/range

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

Any idea on how to prevent this?

Thanks!

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

Do you open one and link it here?