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

【问题标题】：CSS Unknown Distortions happening only on iOS in Angular ApplicationCSS Unknown Distortions 仅在 Angular 应用程序中的 iOS 上发生
【发布时间】：2019-08-28 09:58:09
【问题描述】：

几个月的谜团尚未解开，我希望有人以前见过这个问题并知道如何解决它。使用 Angular 框架构建 PWA，我遇到了一个问题，即 CSS 图像和 CSS 转换如何导致失真和幻影，这实际上意味着在纠正此问题之前无法为 iOS 设备发布该应用程序。

这是非常不一致的，并且一次从一张到多张图像随机发生。它只发生在 iOS 中。在以下设备上测试和复制：

iPhone 6 (iOS 12.1.4) Safari & Chrome & in PWA Standalone
iPhone 6s (iOS 12.1.4) Safari & Chrome & in PWA Standalone
iPhone 6+ (iOS 12.1.4) Safari & Chrome & in 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 生命周期钩子问题，其中元素被重绘，但这已经得到纠正，并且图像不会随着每次 DOM 更改而重新渲染。

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

【问题讨论】：

标签： ios css angular safari

【解决方案1】：

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

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

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

https://www.gimp.org/

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

Safari图片问题参考：