문제 상황
React와 SVG를 사용하여 개발 중에 제목과 시간을 특정 각도로 표시해야 했습니다. 긴 제목의 자동 줄바꿈을 위해 SVG <foreignObject> 안에 HTML <div>와 <span>을 사용하여 텍스트를 렌더링했습니다.
대부분의 데스크탑 브라우저에서는 문제가 없었지만, iPad의 Safari 브라우저에서 이상한 현상이 발생했습니다. 일정 제목(task.title)은 부모 <g> 태그의 rotate 변환에 따라 올바르게 회전했지만, 바로 옆의 소요 시간(durationText) 텍스트만 회전되지 않고 항상 수평으로 표시되었습니다.
원인 분석 및 해결 과정
- SVG
<text>+<tspan>시도: 처음에는 SVG 네이티브 요소로 해결하려 했으나, 자동 줄바꿈이 되지 않아 긴 제목이 잘리는 문제가 있었습니다. - 웹 검색 및 분석:
<foreignObject>와 Safari 렌더링 관련 문제를 검색해보니, Safari/WebKit 엔진이<foreignObject>내부 HTML 콘텐츠에 적용된 특정 CSS 속성(특히transform,position,opacity등)과 관련하여 렌더링 버그나 비호환성 문제가 있다는 다수의 보고(Stack Overflow, Apple Discussions 등)를 발견했습니다. opacity의심: 저희 코드에서는 소요 시간<span>에opacity: 0.3스타일을 적용하고 있었습니다. 웹 검색 결과에서opacity가 Safari의<foreignObject>렌더링 문제와 연관 있다는 내용을 확인하고, 이것이 직접적인 원인일 가능성이 높다고 판단했습니다.- 해결: 소요 시간
<span>에서opacity: 0.3스타일을 제거하고, 대신 반투명 효과를 위해color: rgba(0, 0, 0, 0.5)스타일을 적용했습니다.
결론
opacity 스타일을 제거하고 color 속성을 이용한 반투명 색상으로 대체하자, iPad Safari에서도 시간 텍스트가 제목과 함께 정상적으로 회전되었습니다!
혹시 Safari (iOS) 환경에서 SVG <foreignObject> 내부 요소의 CSS 변환(transform)이나 특정 스타일(특히 opacity)이 예상과 다르게 동작한다면, 해당 스타일을 제거하거나 다른 방식으로 구현하는 것을 고려해 보세요. 이 경험이 비슷한 문제를 겪는 다른 개발자분들께 도움이 되기를 바랍니다.
댓글