В следующем коде у меня есть компонент 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), когда вы нажимаете обработчик, появляется один серый квадрат, который отображается, как вы можете видеть на следующем изображении:
Я хочу предотвратить это, потому что это не очень хорошо выглядит.
С другой стороны, если вы пойдете в эту демонстрацию:
https://beta.ionicframework.com/docs/content/component-preview-app/docs-www/?ionic:mode=ios&ionic:statusbarPadding=true#/range
и нажмите обработчики, вы не получите этот серый квадрат.
Есть идеи, как это предотвратить?
Спасибо!