Image appears blurry or low quality on iphone brwosers

[murtaza-ch]

Image appears low quality on iPhone browsers but it's working perfectly on Android phone browsers. What can be the possible solution?

Here is my code: <TransformWrapper disablePadding ref={mapRef} maxScale={maxScale} minScale={minScale} initialScale={5} initialPositionX={initialPositionX} initialPositionY={initialPositionY} disabled={disabled} > {() => { return ( <TransformComponent> <img src="/map/cactus.jpg" alt="Map" onLoad={handleOnLoad} width={8000} height={4416} style={{ opacity: mapOpacity, transition: "all 1s ease-in-out", objectFit: "cover", }} /> </TransformComponent> ); }} </TransformWrapper>

[Teemeam]

I had a similar problem. In my case, adding transform property to wrapper styles helped:

<TransformComponent
    wrapperStyle={{
        transform: 'translate3d(0,0,0)',
    }}
>

[cmoscosoz]

I had a similar problem. In my case, adding transform property to wrapper styles helped:

<TransformComponent
    wrapperStyle={{
        transform: 'translate3d(0,0,0)',
    }}
>

Thanks! I had the same issue and this helped!

[kellyrmilligan]

this is the most recent issue reported. I am seeing a blurry svg on ios 17 safari and chrome latest on ios 17, but on android the svg is crystal clear. this fixed it for me!!!!!