Question

在以下代码中，我有Ionic 4组件：Range。

JSFiddle来源：
https://jsfiddle.net/681539w0/

直接结果：
https://jsfiddle.net/681539w0/embedded/result/

在线演示：

<!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>

在桌面浏览器中可以。另外，在Android浏览器上也可以。

但是在IPhone（真实设备）浏览器（例如：Chrome）上，当按下处理程序时，会出现一个灰色方块，如下图所示：< / p>

我想防止这种情况，因为它看起来不太好。

另一方面，如果您转到此演示：

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

然后按处理程序，您将不会看到该灰色方块。

关于如何防止这种情况的任何想法？

谢谢！

Answer 1

将-webkit-tap-highlight-color CSS属性设置为transparent，如下所示：

html {
    -webkit-tap-highlight-color: transparent;
}

在iPhone上按HTML元素时的灰色方块效果

1 个答案: