Safari - CSS 변환 3D 회전 결함

Question

div 안에 div가 있습니다. 내부 div HTML은 단일 문자로 구성되어 있으며 div 회전을 180도 3d 회전으로 만들려고합니다. 이 효과는 Safari를 제외한 모든 브라우저에서 정상적으로 작동합니다. Safari에서 내부 div가 회전 할 때 절반 문자 만 반으로 분할 된 것처럼 렌더링됩니다. 깜박 거림이 아닙니다. 캐릭터의 절반이 실제로는없는 비행기 뒤에서 사라지는 것과 같습니다. 동일한 주제에 대한 다른 답변에 따라 필자는 backface-visibilty : hidden 및 transform-style : 내 코드에 3D 규칙을 적용했지만 아무런 효과가 없었습니다.

.inner{ 
    height: 80%; 
    width: 80%; 
    display: flex; 
    flex-flow: column nowrap; 
    align-items: center; 
    justify-content: center; 
    font-family: Arial; 
    font-size: 5em; 
    font-weight: bolder; 
    color: #7CC7EE; 
    -ms-perspective: 800px; 
    -webkit-perspective: 800px; 
    perspective: 800px; 
    -ms-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -ms-backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transition: all .5s linear; 
    transition: all .5s linear; 
} 

.flip{ 
    -ms-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -transform: rotateY(180deg); 
} 

js를 통해 .flip 클래스를 추가 및 제거하여 전환을 트리거합니다. 는 여기에 현재 취급하고있는 무슨의 약간 단순화 된 상황입니다 : https://jsfiddle.net/sb4usrs1/5/

당신은 당신의 전환이 잘 표현 될 수 있지만, 그 원인에 대한 단서를 가리키는 것 때요 DIV 아래가 깜박일 것입니다 볼 수 있습니다 사업부를 클릭하면 ? - 내 실제 시나리오에서 나는 그 divs 중 몇 가지가 동시에 플립 그래서 그것보다 조금 분명하고 혼란보다.

Answer 1

회전 div가 부모 div의 평면을 가로 지르는 데 문제가있는 것 같습니다. 이 대답은 Bug in CSS3 rotateY transition on Safari?입니다. 나는 Z-index = 1을 반전 div로 설정하여 해결했습니다.