문제

SVG foreignObject not working properly on Safari

Safari에서 svg 내 foreignObject를 사용하면서, 엘리먼트의 위치가 안맞는 이슈가 있었다.

엘리먼트의 position이 static, fixed가 아닌 경우 위치가 left: 0, top: 0 에서 렌더링 된다. (개발자 도구에서 엘리먼트 위치를 찍어보면 정상적으로 나온다.)

이슈화 된지는 매우 오래되었으나, position: fixed; 외의 별다른 해결책은 안보인다.

23113 - Layer content inside HTML in SVG foreignObject renders in the wrong place

해결책

공식적인 해결책은 나오지 않았기 때문에, 이런 방법들을 사용했다.

1. position: fixed;

• 자식 엘리먼트의 position이 absolute, relative인 경우에 부모 엘리먼트의 position을 fixed로 설정한다.

<style>
	#parents {
		position: fixed;		
	}

	#child {
		position: relative;
	}
</style>

<foreignObject>
	<div id="parents">
		<div id="child">foreignObject</div>
	</div>
</foreignObject>

단, 이경우에는 position: fixed;를 가진 엘리먼트가 다른 엘리먼트 위에 렌더링 된다. (Safari 한정)

svg는 z-index가 없기 때문에 나중에 렌더링 되는 엘리먼트가, 다른 엘리먼트 위에 렌더링 되는데, Safari의 경우 position: fixed;를 사용하면 렌더링 순서와 상관 없이 가장 위에 렌더링 된다.

1. position: static; 외의 속성을 사용 안함

• position: static; 외의 다른 position 속성을 사용하지 않는 것이다. 당연히 좋은 해결책은 아니지만, foreignObject를 복잡하게 사용할 상황이 많이 없기 때문에 상황이 된다면 가장 좋은 해결책이라고 생각한다.

// 엘리먼트들의 position default value는 static 이기 때문에,
// 별도의 position 속성을 적용하지 않는다.

<style>
	#parents {
	
	}

	#child {

	}
</style>

<foreignObject>
	<div id="parents">
		<div id="child">foreignObject</div>
	</div>
</foreignObject>

이 경우에는 position: fixed; 에서 발생했던 렌더링 순서 문제가 없다. 타 브라우저 처럼 dom 순서대로 렌더링 된다.