Tailwindcss preflight breaks zoom position

[HasanMothaffar]

When using this component with TailwindCSS and Preflight is enabled, the zoom functionality is kind of broken. I found out that the bug was due to the height: auto in preflight styles, which was preventing the hover img from taking up its full, original height.

Unfortunately, using all kinds of CSS reset declarations (inherit, revert, initial, unset) doesn't work. This is explained in https://stackoverflow.com/questions/44010645/remove-height-auto-using-css. Interestingly, the revert-layer css rule was able to fix this issue, but it's an experimental rule that seems to work only on Firefox at the moment of writing.

I came up with a solution using React, which I will share below.

Here's a picture without using this solution (mouse is in the middle):

After solution (mouse is in the middle):

Solution:

import InnerImageZoom from "react-inner-image-zoom";
import "react-inner-image-zoom/lib/InnerImageZoom/styles.min.css";
import { useEffect, useState } from "react";
import styles from "./ProductDetailsImage.module.css"

export const ProductDetailsImage = ({ imageSrc = "", alt = "" }) => {
    const [height, setHeight] = useState<number>();
    const zoomScale = 1.5;

    useEffect(() => {
        const img = new Image();
        img.src = imageSrc;

        img.onload = () => {
            setHeight(img.naturalHeight * zoomScale);
        }
    }, [imageSrc]);
    
    return (
        <div className="mb-4" style={{"--image-height": `${height}px`}}>
            <InnerImageZoom className={styles.productDetailsImage} src={imageSrc} zoomType="hover" zoomScale={zoomScale} imgAttributes={{ alt }}  />
        </div>
    );
};

And here's ProductDetailsModule.css:

.productDetailsImage :global(.iiz__zoom-img) {
    height: var(--image-height);
}

[HuanRE]

Setting height: revert-layer; also worked for me on Chrome.