Ошибка React Card Flip - Safari - Размер карты не изменяется, как ожидалось, после переворачивания

Question

Я создаю приложение, которое имеет возможность переворачивать карты, и когда вы наводите курсор на карту, сфокусированная карта должна изменяться до 30vw, а другие карты - до 15vw. Когда вы наведете курсор на все карты, все они должны вернуться к исходным 20vw.

Похоже, что после первого переворота в Safari возникла проблема, изменение размера не работает должным образом (вы можете видеть, что он работает нормально до первого переворота).

Вы можете просмотреть пример того, о чем я говорю, здесь, в Safari:

https://master.d35k32uc23ao8f.amplifyapp.com

Как должно выполняться изменение размера

Как это работает после переворота (неверно)

Если вы посмотрите в Chrome, вы сможете увидеть, как карточки переворачиваются и меняются размеры, как и ожидалось.

Насколько я могу судить, проблема заключается в justify-content: start/flex-start. Я пробовал множество решений CSS Flex/grid/float, но, похоже, ничто не может решить проблему. Например, контейнер div в настоящее время настроен на:

.test-div {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

Заранее благодарю за любую помощь, это сводит меня с ума!

Вот мой компонент для карты:

import React, { useState } from "react";
import ReactCardFlip from "react-card-flip";
import TestCard from "./TestCard";

export default function Test() {
  const [isFlipped, toggleFlip] = useState(false);
  const [backGroundWidth, setBackgroundWidth] = useState({
    onHover: "20vw",
    offHover: "20vw",
    id: null
  });

  const handleClick = () => {
    toggleFlip(!isFlipped);
  };

  const hoverEffect = e => {
    console.log(e.currentTarget);
    const { id } = e.currentTarget;
    const num = id.toString();
    setBackgroundWidth({
      ...backGroundWidth,
      offHover: "15vw",
      onHover: "30vw",
      id
    });
  };

  const handleHoverOut = e => {
    offHoverEffect(e);
  };

  const offHoverEffect = e => {
    setBackgroundWidth({
      offHover: "20.00vw",
      onHover: "20.00vw",
      id: null
    });
  };

  // const offHover = () => {};

  return (
    <div>
      <button
        style={{ width: "50px", backgroundColor: "orange", color: "white" }}
        onClick={handleClick}
      >
        Flip
      </button>

      <div className='test-div'>
        <TestCard
          handleHoverOut={handleHoverOut}
          hoverEffect={hoverEffect}
          isFlipped={isFlipped}
          onHover={backGroundWidth.onHover}
          offHover={backGroundWidth.offHover}
          id={backGroundWidth.id}
          divId={"1"}
          color='blue'
        />
        <TestCard
          handleHoverOut={handleHoverOut}
          hoverEffect={hoverEffect}
          isFlipped={isFlipped}
          onHover={backGroundWidth.onHover}
          offHover={backGroundWidth.offHover}
          id={backGroundWidth.id}
          divId={"2"}
          color='green'
        />
      </div>
    </div>
  );
}

И сама карта:

import React from "react";
import ReactCardFlip from "react-card-flip";

export default function TestCard({
  isFlipped,
  onHover,
  offHover,
  id,
  divId,
  hoverEffect,
  handleHoverOut,
  color
}) {
  return (
    <ReactCardFlip isFlipped={isFlipped} flipDirection='horizontal'>
      <div
        onMouseOver={e => hoverEffect(e, "front")}
        onMouseOut={handleHoverOut}
        style={{
          width: id === divId ? onHover : offHover,
          backgroundColor: color,
          color: "white"
        }}
        className='test-card'
        id={divId}
      >
        Card should fit 20vw on hover.
      </div>

      <div
        id={divId}
        onMouseOver={e => hoverEffect(e, "front")}
        onMouseOut={handleHoverOut}
        style={{
          width: id === divId ? onHover : offHover,
          backgroundColor: color,
          color: "white"
        }}
        className='test-card'
      >
        Card should fit 10vw off hover.
      </div>
    </ReactCardFlip>
  );
}

Answer 1

Решено! Если кто-нибудь столкнется с этой проблемой, зайдите в ReactCardFlip.ts в модулях узла и удалите width: 100% в строке 64. Вам также необходимо удалить другие width: 100% в строках 56 и 66.

    flipper: {
        height: '100%',
        position: 'relative',
        // width: '100%',
    },