🌈 Safari에서 그라데이션 배경에 트랜지션이 적용되지 않았던 이유

안녕하세요, 구독자 님!
뉴스레터를 구독해신 분들께 매번 감사드립니다. 🙇‍♂️

프론트엔드 개발자라면 한 번쯤은 이런 상황을 겪어보셨을 겁니다. “Chrome에서는 분명히 잘 되는데, Safari에서만 안 되네요?” 네, 오늘도 어김없이 Safari입니다.

요즘 회사 프로젝트 QA 기간 막바지라 크로스 브라우징 테스트를 열심히 하고 있는데요, 역시나 Safari 이슈가 저를 반겨주더라구요. 아직 해결하지 못한 몇몇 이슈들이 남아있어서 요즘 글쓸 소재가 넘쳐나는 호사(?)를 누리고 있습니다.

이번에 마주한 이슈는 Safari 18 이하 버전에서 CSS currentColor 값을 이용해 구현된 그라데이션 배경에 트랜지션을 적용했음에도 불구하고 제대로 적용되지 않는 현상입니다. 원인을 파악하고 나니 브라우저 엔진 자체의 렌더링 최적화 과정에서 발생한 버그였고, 이를 해결하는 방법도 찾아서 공유해보려고 합니다.

이번 포스트를 통해 CSS 그라데이션에 트랜지션 효과를 적용하는 방법이 궁금하신 분들, 그리고  Safari에서 해당 트랜지션이 동작하지 않는 이슈를 겪고 계신 분들에게 도움이 되길 바랍니다.