사파리에서 전환이 작동하지 않는 의사 요소 회전

나는 : after 의사 요소에 요소가 있습니다. 클릭하면 부드럽게 전환됩니다.사파리에서 전환이 작동하지 않는 의사 요소 회전

내 코드 펜은 http://codepen.io/maxwbailey/pen/ABgJq입니다.이 기능은 Mac의 Chrome, Firefox 및 Opera에서 작동하지만 Safari에서는 작동하지 않습니다.

내 코드 ...

HTML

.expand:after { 
    content:""; 
    display:block; 
    width:200px; 
    height:200px; 
    background-color:red; 
    cursor:pointer; 
    -webkit-transition: -webkit-transform 1s ease; 
    -moz-transition: -moz-transform 1s ease; 
    transition: transform 1s ease; 
} 

.expanded:after { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
}

jQuery를

$('.expand').click(function(e) { 
    $(this).toggleClass('expanded'); 
});

내가 뭘 잘못 알고 싶으세요

<div class="expand"></div>

CSS.

Safari에서이 사이트를 본 적이 있습니다. http://www.barrelny.com/blog/ ('View by Category (카테고리 별보기)'드롭 다운을 클릭하면 화살표가 전환과 함께 회전하는 것을 볼 수 있습니다. 여기서는 가상 셀렉터를 사용하지 않고 있지만 거기에 있습니다. ? 그것은 다른 브라우저 그냥 사파리

는 또한이가에 있어야 작동으로 방법이 의사 클래스와 함께 할 수 있습니다 : 후 예를 들어 내가 준 문제의 단순화 된 버전입니다

출처

2013-08-18 Adam

당신이 링크 된 페이지가의 화살표 : 현재 사파리 6.0.2 및 아래로 지원되지 않는 보여주는 Transitions and Animations on CSS Generated Content

의사 요소가 없습니다. – nirazul

죄송합니다. 내 게시물을 업데이트했습니다. – Adam

http://codepen.io/chriscoyier/pen/BkhFI 브라우저가 유사 요소의 애니메이션을 지원하는지 확인하는 테스트 사례입니다. 그들은 움직일 수 있습니까? 그렇다면 희망이 있으며, 그렇지 않다면 아직 지원되지 않습니다. – nirazul

의사 요소의 천이는 서서히 브라우저로 나아가는 문제입니다.

저는 la를 실행 중입니다. 테스트 사파리 베타 : v6.1 (8537.54.1) - 그것은 나를 위해 잘 작동합니다. 조만간 수정의 땅이 보일 것 같습니다.

CSS-트릭은 수정 땅으로 업데이트되는 게시물이 있습니다 Bug report

출처

2013-08-18 15:37:54 dc5

이 중요한 정보 주셔서 감사합니다. 예 Safari 6.0.5를 실행 중입니다. 따라서 6.1을 기다리거나 사용하지 않고 할 수있는 방법이 있는지 살펴볼 수 있습니다. 다시 한 번 감사드립니다 – Adam

http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ 새로운 사파리 버전이 나오면이 문제가 해결 될 것입니다. – PRAH

사파리에서 전환이 작동하지 않는 의사 요소 회전

답변

관련 문제