Chrome renders improperly due to fit-content setting of Width and Height

[dpdoughe]

The current release of Chrome (v81.0.4044.138) fails to render properly. I've verified this with both PNG and SVG images.

This appears due to the width and height properties of the class react-transform-component / TransformComponent-module_container having values set to "fit-content". Firefox v.77.0b6 ignores these properties and unsupported and renders properly. Chrome appears to support the setting but does not render properly (the react-transform-component is too big and even extends beyond its containing div).
Solution: Setting both height and width of the react-transform-component / TransformComponent-module_container element to "unset" corrects the issue in Chrome. Panning, zooming etc function as expected once the unset for height and width is used.

[dpdoughe]

The troublesome "fit-content" settings for height and width appear to be coming from this file

https://github.com/prc5/react-zoom-pan-pinch/blob/f5b8bf3761db95ddf7b77bdb778e379c574eb45d/src/components/TransformComponent.module.css

Not sure if this is forward or backward breaking compatibility. I would like an easy way to have these set to "unset" instead.

[dpdoughe]

The following is a work-around solution that fixes the issues for me that I experienced in Chrome (v81.0.4044.138) with improper rendering using react-zoom-pan-pinch

.react-transform-component {
    width: unset !important;
    height: unset !important;
}

[dpdoughe]

It also seems that Chrome only fits the image by height. When having zero translation and scale=1, Still possibly related issues. Chrome seems to scale the image to fit the vertical extent of the image. However, a wide image will have hidden parts to the right. In contrast, Firefox seems to do the "correct" thing which is to scale the image such that both the vertical and hozizontal extents of the image are in view when scale=1 and zero translation.

[dpdoughe]

Turns out to get cross-browser rendering with the same behavior you willl need all 3 of these below. Now Chrome and Firefox are behaving the same way.

.react-transform-component {
    width: unset !important;
    height: unset !important;
}

.react-transform-element {
    width: unset !important;
    height: unset !important;
}

img {
    max-width:  100%;
    max-height: 100%;
    display: block;
}

[jonthies]

I was able to "unset" the width and height by passing the undocumented wrapperClass and contentClass arguments to the TransformWrapper options prop.

https://github.com/prc5/react-zoom-pan-pinch/blob/f78c546414b13c61a68368db74ed9fd9fb2e185c/src/components/TransformComponent.tsx#L33

<TransformWrapper  options={{ wrapperClass: 'my-wrapper-class', contentClass: 'my-content-class'}} >

[a-y-u-s-h]

To make it work with divs, this worked for me:

.react-transform-component {
    width: 100% !important;
    height: 100% !important;
}

.react-transform-element {
    width: 100% !important;
    height: 100% !important;
}

[donrestarone]

Thanks an absolute million for this post! I was struggling with no end in sight to the application to render with React-grid-layout

[camilofuture]

This is a very great package for zooming, but the fitContent thing ruins the experience...

[Alwinator]

Had the same problem, however the workarounds from above did not work. I fixed my bug using:

.react-transform-wrapper {
    width: 100% !important;
    height: 100% !important;
}

[Ananthang]

I had this issue it is work for me

<TransformComponent
  wrapperStyle={{ height: '100%', width: '100%' }}
  contentStyle={{ height: '100%', width: '100%' }}
>
  {previewFrame()}
</TransformComponent>