gatsby-plugin-image css (overflow-hidden) issue

[Lofi-Bytes]

Hi everybody,

So, I just upgraded to gatsby-plugin-image and I'm running into something weird. I have a round avatar (a round div set to overflow hidden with image inside). The problem is that gatsby-plugin-image is doing something to make the image not obey overflow-hidden in Safari and on all mobile browsers. It works just fine on Chrome and Firefox (desktop). It also works fine with the old gatsby-image and a regular tag. The blur preview of the image also obeys, but when the final image loads the full square shows. Below is the StaticImage giving me trouble. Has anyone else ran into this? Thanks.

<div className="relative overflow-hidden rounded-full w-28 h-28">
  <StaticImage
    src="../../images/some-image.jpg"
    placeholder="blurred"
    layout="constrained"
    width={300}
    formats={["auto", "webp", "avif"]}
    alt="Jillian's avatar."
  />
</div>