[英]iOS - Safari - images not rendering fully / cut off
We are loading images in a popup, via an Ajax request, and they intermittently only partially render.我们正在通过 Ajax 请求在弹出窗口中加载图像,并且它们间歇性地仅部分呈现。
I've basically removed any weird Javascript/nonsense other than the core flow - just a basic HTML image, and it is still happening - only on iOS.除了核心流程之外,我基本上已经删除了任何奇怪的 Javascript/废话——只是一个基本的 HTML 图像,它仍在发生——仅在 iOS 上。
Once you 'rotate' the device, the image renders correctly - so, it's not a weird div floating above or anything (I can select the image in iOS debugger mode when attached to a Mac)一旦你“旋转”设备,图像就会正确渲染 - 所以,它不是一个奇怪的 div 漂浮在上面或任何东西(当连接到 Mac 时,我可以 select iOS 调试器模式下的图像)
Any help would be most appreciated.非常感激任何的帮助。
It seems this is an issue within the iOS image decoder - some kind of race condition.这似乎是 iOS 图像解码器中的一个问题——某种竞争条件。
This has been fixed by forcing the decoder to operate on the main thread, using:这已通过强制解码器在主线程上操作来解决,使用:
<img decoding="sync" src="@Url" />
Hopefully this helps someone else!希望这对其他人有帮助!
Setting decoding="sync"
on the img
tag didn't help in my case where a lot of images are loaded simultaneously.在我同时加载大量图像的情况下,在
img
标签上设置decoding="sync"
并没有帮助。 Loading the image manually before did the trick though.之前手动加载图像可以解决问题。
const imageLoader = new Image();
imageLoader.src = url;
imageLoader.decoding = 'sync';
imageLoader.onload = () => {
// allow drawing image
};
For anyone who stumbles across this and is working in a react environment对于任何偶然发现这一点并在反应环境中工作的人
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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.