음악, 삶, 개발

Transform 도 reflow 를 trigger 할수있다. 안전하지않다. 본문

개발 Web/HTML & CSS

Transform 도 reflow 를 trigger 할수있다. 안전하지않다.

Lee_____ 2022. 1. 14. 02:46

관련된 아주 좋은  설명들.. (감사합니다)

 

https://blinders.tistory.com/92

https://blinders.tistory.com/93

https://sculove.github.io/slides/improveBrowserRendering/#/7

 

중요한건 아래와 같다.

.foo { transform: scale(0) } /* 반드시. 초기값 설정해줘야함. 없으면 reflow 발생 */

.foo.visible { transform: scale(1) }

만약 transform 의 초기값이 없이 classlist 에 transform 을 하기위한 class 가 추가된다면

reflow 가 발생한다.

 

또 하나 "update layer tree" 라는것이 transform 을 통해 trigger 되는데

이를 조금 더 조사해보자.