Disappearing/reappearing text glitch when addition transition on Chrome

Previously I had a static card component (.product) which was working perfectly. However, I wanted to add functionality to make the image on the card grow when the user hovers over the parent card element, as you can see here:

.product {
  margin: 10px;
  padding: 20px;
  padding-bottom: 80px;
  width: 100%;
  max-height: 100vh;
  min-width: 100px;
  background-color: white;
  z-index: 1;
  position: relative;
}

.product > img {
  user-select: none;
  max-height: 200px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 15px;
  transition: 0.3s; /*Added line*/
}

.product:hover > img {
  transform: scale(1.1); /*Added line*/
}

Here is the HTML of the card (I'm using React):

    <div className="product">
      <div className="product__header">
        <div className="product__info">
          <h2> {product.title} </h2>
          <p className="product__price">
            <small> $ </small>
            <strong> {product.price} </strong>
          </p>
          <div className="product__rating">{ratingOutput()}</div>
        </div>
      </div>
      <img src={product.image} alt="" />
      <div className="product__ingredients">
        <p> Ingredients: {product.ingredients}</p>
      </div>
      <button onClick={addToBasket} style={{ backgroundColor: buttonColor() }}>
        {" "}
        Add to Order{" "}
      </button>
    </div>

But after I added the two CSS lines, it would occasionally cause the other text components that are on the card to disappear when hovering on Chrome. The glitchy text will then randomly appear and disappear again when the mouse moves.

Key Details

• I'm experiencing this problem on Chrome (V96.0.4664.93) and have not been able to replicate it using Firefox (V95.0) or Edge (V96.0.1054.53)
• It happens on my monitor which is 1900px wide and the glitch seems to go away when I narrow the window to less than 1700px
• Also haven't been able to replicate it with just the transform property alone, so it appears to be from the addition of the transition property

The first two images below are examples of the text being distorted/disappearing as a result of hovering and the last image is what it looks like normally.