Question

一个月的谜尚待解决，我希望有人以前见过这个，并且知道如何解决。使用Angular框架构建PWA时，我遇到了CSS图像和CSS转换如何引起变形和幻影的问题，这实际上意味着在更正此问题之前，该应用无法在iOS设备上发布。

这是非常不一致的，并且一次随机出现一幅到几幅图像。它仅在iOS中发生。在以下设备上进行了测试和复制：

iPhone 6（iOS 12.1.4）Safari和Chrome及PWA独立版
iPhone 6s（iOS 12.1.4）Safari＆Chrome和PWA Standalone
iPhone 6+（iOS 12.1.4）Safari＆Chrome和PWA Standalone
iPhone x（iOS 12.2）Safari＆Chrome和PWA Standalone
iPad Pro（iOS 12.2）Safari＆Chrome和PWA Standalone

早在Galaxy S4和Galaxy Tab A以及最新的Pixel 3上，任何Android设备上都不会发生这种情况，台式机上的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更改都不会重新渲染图像。

有人遇到过并解决过这个问题吗？