Я строил причудливый анимированный раздел SVG в карте.
он в основном состоит из контейнера с позицией: относительный < /code> и пара анимированных, которые компонент выглядит следующим образом: < /p>
interface HalbBProps extends React.ComponentProps {
color: MotionValue
}
function HalbB({ color, ...props }: HalbBProps) {
return (
)
}
export default HalbB
< /code>
В разделе они используются следующим образом: < /p>
< /code>
Все работает хорошо в браузере Chrome. Я добавил мобильный стиль, который в основном только вдвое значения. Они также хорошо выглядели в хромированном окне с небольшой шириной. Вы можете увидеть это на скриншоте. Может ли TailWindcss возникать проблемы? However in Safari you can see the blank space to the relative upper container.
Regarding tech stack: Using latest Next.js 15.3 and TailwindCSS v4.1 for styling, framer-motion (latest) for animating.
Chrome DevTools < /th>
Safari Devtools < /th>
< /tr>
< /thead>
Подробнее здесь: https://stackoverflow.com/questions/796 ... refox-work
