Gray square effect when pressing a HTML element on IPhone

Ionic Framework
1

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!

2

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

Do you open one and link it here?