CSS Unknown Distortions仅在Angular Application中的iOS上发生

Question

几个月的谜团还有待解决，我希望有人之前见过这个，并知道如何解决它。使用Angular框架构建PWA，我遇到了CSS图像和CSS转换如何导致扭曲和显示的问题，这有效意味着在更正之前无法为iOS设备发布应用程序。

它非常不一致，一次从一个到几个图像随机发生。它只发生在iOS中。在以下设备上进行测试和复制：

iPhone 6（iOS 12.1.4）Safari和Chrome以及PWA Standalone
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

任何Android设备都不会发生回到Galaxy S4和Galaxy Tab A，也不会出现像Pixel 3那样......也不会出现在台式机上的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更改都不会重新渲染图像。

以前有没有遇到过这个问题？