사파리 visibility 애니메이션 이슈

transform 속성으로 애니메이션 효과를 줄 때, display:none에서 display:block으로 바뀌는 요소에는 transform 애니메이션 효과가 적용되지 않습니다.
그렇기 때문에 visibility: hidden에서 visibility: visible로 애니메이션 효과를 구현할 때가 있습니다.

그런데 이렇게 하면 다른 브라우저에선 괜찮은데 사파리에서 scroll이 되어야 하는 영역이 안되는 경우가 있습니다.
처음 페이지를 그릴 때 visibility: hidden 이 적용되어있는 요소, 그리고 이 요소의 자식요소(상속됨)들의 영역을 전부 그리지 않는 것같다는 것이 저의 추측입니다.
즉, scroll이 되어야 하는 영역엔 visibility: visible을 주어 처음 페이지를 그릴 때 scroll이 되어야 하는 요소는 전체적으로 다 그리게끔 해줘야됩니다.

<div class="transform"> <!-- 왼쪽 요소에 visibility: hidden / visible, transform 을 활용한 애니메이션 효과가 적용되어 있다. -->
    <div class="scroll"> <!-- 왼쪽 요소는 스크롤이 되어야하는 요소이다. 이 요소엔 visibility: visible 을 주어야된다. -->
    
    </div>
</div>