Я строил причудливый анимированный раздел SVG в карте.
он в основном состоит из контейнера с позицией: относительный < /code> и пара анимированныхсвг, который компонент выглядит следующим образом: < /p>
interface HalbBProps extends React.ComponentProps {
color: MotionValue
}
function HalbB({ color, ...props }: HalbBProps) {
return (
)
}
export default HalbB
< /code>
В разделе они используются следующим образом: < /p>
< /code>
Все работает хорошо в браузере Chrome. Я добавил мобильный стиль, который в основном только вдвое значения. Они также хорошо выглядели в хромированном окне с небольшой шириной. Вы можете увидеть это на скриншоте. Может ли TailWindcss возникать проблемы?
Использование DevTools, верхнее значение соответствует друг другу. Однако в Safari вы можете увидеть пустое пространство для относительного верхнего контейнера.
Относительно технического стека: использование последних следующих.js 15.3 и Tailwindcs v4.1 для стиля, фреймер-движения (последнее) для анимации. /> Safari Devtools < /p>
Подробнее здесь: https://stackoverflow.com/questions/796 ... refox-work
