ios - CSS Unknown Distortions 仅在 Angular 应用程序中的 iOS 上发生

几个月的谜团尚未解开，我希望有人以前见过这个并知道如何解决它。使用 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

它不会发生在任何 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 原生 标记和作为 div 背景都会出现问题。

有一段时间我认为这可能是一个 Angular 生命周期钩子(Hook)问题，其中元素被重绘，但这已经得到纠正，并且图像不会随着每次 DOM 更改而重新渲染。

以前有没有人遇到过并解决过这个问题？

---

Best Answer-推荐答案

我会立即怀疑这是 PNG 编码问题。使用不同的软件产品重新保存您的所有 PNG Assets ，并尝试追踪创建 PNG 的来源以及他们使用的软件。

您需要完全重新生成 PNG 文件。所以我会先保存为另一种格式，如 TIFF，然后再次保存为 PNG。确保图像编辑器强制重新生成所有 PNG 颜色数据、标题和编码。

您可以使用免费的开源编辑器来执行此操作:

https://www.gimp.org/

Safari 网络浏览器有扭曲图像的历史。流行和常用的图形文件包含广泛的内部编码标准。虽然文件扩展名可能始终如 PNG、JPG 或 TIFF。编码、格式和内容的版本可能会有很大差异。使用最新的图像软件并确保正确生成 PNG 文件是重要的一步。

Safari图片问题引用:

https://discussions.apple.com/thread/6680826

https://discussions.apple.com/thread/7648947

关于ios - CSS Unknown Distortions 仅在 Angular 应用程序中的 iOS 上发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55553310/