ios - CSS Unknown Distortions 仅在 Angular 应用程序中的 iOS 上发生
<p><p>几个月的谜团尚未解开，我希望有人以前见过这个并知道如何解决它。使用 Angular 框架构建 PWA，我遇到了 CSS 图像和 CSS 转换如何导致失真和幻影的问题，这实际上意味着在纠正此问题之前无法为 iOS 设备发布该应用程序。</p>
<p>这是非常不一致的，并且一次从一张到多张图像随机发生。它只发生在 iOS 中。在以下设备上测试和复制:</p>
<ul>
<li>iPhone 6 (iOS 12.1.4) Safari 和 Chrome 以及 PWA 独立版</li>
<li>iPhone 6s (iOS 12.1.4) Safari & Chrome & PWA Standalone</li>
<li>iPhone 6+ (iOS 12.1.4) Safari & Chrome & PWA Standalone</li>
<li>iPhone x (iOS 12.2) Safari & Chrome & PWA Standalone</li>
<li>iPad Pro (iOS 12.2) Safari & Chrome & PWA Standalone</li>
</ul>
<p>它不会发生在任何 Android 设备上，可以追溯到 Galaxy S4 和 Galaxy Tab A，以及最新的 Pixel 3……也不会出现在台式机上的 Chrome、Safari 或 Firefox 中。 </p>
<p>在某些情况下，单个图标会在整个图标集中重复出现，例如在标签栏上。</p>
<p> <a href="/image/RxQk5.png" rel="noreferrer noopener nofollow"><img src="/image/RxQk5.png" alt="Inline Style"/></a> </p>
<pre><code><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>
</code></pre>
<hr/>
<p> <a href="/image/r5hkj.png" rel="noreferrer noopener nofollow"><img src="/image/r5hkj.png" alt="Using Class rather than inline"/></a> </p>
<pre><code><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;
}
</code></pre>
<p>如您所见，内联样式和样式表方法以及使用 HTML 原生 <code><img></code> 标记和作为 div 背景都会出现问题。 </p>
<p>有一段时间我认为这可能是一个 Angular 生命周期钩子(Hook)问题，其中元素被重绘，但这已经得到纠正，并且图像不会随着每次 DOM 更改而重新渲染。</p>
<p>以前有没有人遇到过并解决过这个问题？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我会立即怀疑这是 PNG 编码问题。使用不同的软件产品重新保存您的所有 PNGAssets ，并尝试追踪创建 PNG 的来源以及他们使用的软件。</p>
<p>您需要完全重新生成 PNG 文件。所以我会先保存为另一种格式，如 TIFF，然后再次保存为 PNG。确保图像编辑器强制重新生成所有 PNG 颜色数据、标题和编码。</p>
<p>您可以使用免费的开源编辑器来执行此操作:</p>
<p> <a href="https://www.gimp.org/" rel="noreferrer noopener nofollow">https://www.gimp.org/</a> </p>
<p>Safari 网络浏览器有扭曲图像的历史。流行和常用的图形文件包含广泛的内部编码标准。虽然文件扩展名可能始终如 PNG、JPG 或 TIFF。编码、格式和内容的版本可能会有很大差异。使用最新的图像软件并确保正确生成 PNG 文件是重要的一步。</p>
<p>Safari图片问题引用:</p>
<p> <a href="https://discussions.apple.com/thread/6680826" rel="noreferrer noopener nofollow">https://discussions.apple.com/thread/6680826</a> </p>
<p> <a href="https://discussions.apple.com/thread/7648947" rel="noreferrer noopener nofollow">https://discussions.apple.com/thread/7648947</a> </p></p>
<p style="font-size: 20px;">关于ios - CSS Unknown Distortions 仅在 Angular 应用程序中的 iOS 上发生，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/55553310/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/55553310/
</a>
</p>
页:
[1]