iOS - Safari - 圖像未完全渲染/截斷

Question

我們正在通過 Ajax 請求在彈出窗口中加載圖像，並且它們間歇性地僅部分呈現。

除了核心流程之外，我基本上已經刪除了任何奇怪的 Javascript/廢話——只是一個基本的 HTML 圖像，它仍在發生——僅在 iOS 上。

一旦你“旋轉”設備，圖像就會正確渲染 - 所以，它不是一個奇怪的 div 漂浮在上面或任何東西（當連接到 Mac 時，我可以 select iOS 調試器模式下的圖像）

非常感激任何的幫助。

Answer 1

這似乎是 iOS 圖像解碼器中的一個問題——某種競爭條件。

這已通過強制解碼器在主線程上操作來解決，使用：

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

希望這對其他人有幫助！

Answer 2

就我而言，解決方案是減小我顯示的圖像的大小。 我們的圖像大約是顯示它們的 HTML 元素大小的 10 倍。

蘋果的開發者文檔指出：

Answer 3

在我同時加載大量圖像的情況下，在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>
);