Тайна на несколько месяцев еще не раскрыта, и я надеюсь, что кто-то видел это раньше и знает, как это исправить.Используя Angular Framework для создания PWA, я сталкиваюсь с проблемой того, как CSS-изображения и CSS-преобразования вызывают искажения и появления, что фактически означает, что приложение не может быть выпущено для устройств iOS, пока это не будет исправлено.
Это очень противоречиво и происходит случайно от одного до нескольких изображений одновременно.Это происходит только в iOS.Протестировано и воспроизведено на следующих устройствах:
- iPhone 6 (iOS 12.1.4) Safari & Chrome и в PWA Standalone
- iPhone 6s (iOS 12.1.4) Safari & Chrome &в автономном PWA
- iPhone 6+ (iOS 12.1.4) Safari и Chrome и в автономном PWA
- iPhone x (iOS 12.2) Safari & Chrome & в автономном PWA
- iPad Pro (iOS 12.2) Safari & Chrome & в PWA Standalone
Это не происходит ни на одном устройстве Android, начиная с Galaxy S4 и Galaxy Tab A, и так же актуально, как Pixel3 ... и не происходит в Chrome, Safari или Firefox на настольных компьютерах.
Существуют также случаи, когда один значок будет дублироваться по всему набору иконок, например, на панели вкладок.
<div style="background-image: url('/assets/elements/SolidCircleCheck.png');
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
image-rendering: crisp-edges;
height: 3rem; width: 3rem;
filter: brightness(2)
drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.1rem);
margin: auto;"></div>
<div class="nav-tab-section-a nav-tab-inactive">
<img class="nav-tab-image text-no-select" src="/assets/nav/Chat.png" alt="Chat">
<br /><span class="nav-tab-title text-no-select">Members</span>
</div>
.nav-tab-section-a {
grid-area: nav-tab-section-a;
}
.nav-tab-active, .nav-tab-inactive {
margin: 0 auto;
align-content: center;
text-align: center;
}
.nav-tab-inactive {
-webkit-filter: brightness(110%);
filter: brightness(110%);
}
.nav-tab-image {
height: 3.25rem;
}
.text-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Как видите, проблема возникает как с использованием встроенного стиля и методов таблиц стилей, так и с использованием нативного HTML <img> тег и в качестве фона div.
Некоторое время я думал, что это может быть проблема с ловушками Angular Lifecycle, когда элементы перерисовываются, но с тех пор это исправлено, и изображения не перерисовывались при каждом изменении DOM.
Кто-нибудь когда-нибудь сталкивался и решал это раньше?