iOS - Safari - 图像未完全渲染/截断答案

【问题标题】：iOS - Safari - images not rendering fully / cut offiOS - Safari - 图像未完全渲染/截断
【发布时间】：2020-02-07 22:47:05
【问题描述】：

我们正在通过 Ajax 请求在弹出窗口中加载图像，并且它们间歇性地仅部分呈现。

除了核心流程之外，我基本上已经删除了所有奇怪的 Javascript/废话 - 只是一个基本的 HTML 图像，它仍在发生 - 仅在 iOS 上。

一旦您“旋转”设备，图像就会正确呈现 - 因此，它不是漂浮在上方的奇怪 div 或任何东西（当连接到 Mac 时，我可以在 iOS 调试器模式下选择图像）

任何帮助将不胜感激。

【问题讨论】：

标签： html ios safari

【解决方案1】：

在img 标签上设置decoding="sync" 在我同时加载大量图像的情况下没有帮助。不过之前手动加载图像就可以了。

      const imageLoader = new Image();
      imageLoader.src = url;
      imageLoader.decoding = 'sync';
      imageLoader.onload = () => {
        // allow drawing image
      };

对于任何偶然发现这一点并在反应环境中工作的人

const [didLoadMainImage, setDidLoadMainImage] = useState(false);
useMemo(() => {
  setDidLoadMainImage(false);
  const imageLoader = new Image();
  imageLoader.src = url;
  imageLoader.decoding = 'sync';
  imageLoader.onload = () => {
    setDidLoadMainImage(true);
  };
}, [url]);

return (
  <div>
   {didLoadMainImage ? (
     <img src={url} />
   ) : null}
  </div>
);

【讨论】：

【解决方案2】：

就我而言，解决方案是减小我正在显示的图像的大小。我们的图像大约是显示它们的 HTML 元素大小的 10 倍。

Apple 的开发者文档指出：

【讨论】：

【解决方案3】：

这似乎是 iOS 图像解码器中的一个问题 - 某种竞争条件。

已通过强制解码器在主线程上操作来解决此问题，使用：

<img decoding="sync" src="@Url" />

希望这对其他人有帮助！

【讨论】：

我遇到了类似的问题，但是，这个解决方案对我不起作用。我可以进入检查器并增加/减少位置，它会突然渲染整个图像。只发生在 iOS 上。确信这会解决它。