В Safari 5 добавление ссылки на переход 3D CSS нарушает мои переходы 2D - PullRequest
Новая
       69

В Safari 5 добавление ссылки на переход 3D CSS нарушает мои переходы 2D

1 голос
/ 21 ноября 2011

В Safari 5 добавление ссылки на 3D-переход нарушает мои 2D-переходы. Я использую версию 5.1.1 (7534.51.22).

Следующий код демонстрирует: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css" charset="utf-8">
            body{ font-family:Arial;font-size:1.5em; line-height:3em; }

            .item-a 
            {
                padding-left: 0;
                -webkit-transition: padding-left 0.1s ease-out;
            }

            .item-a:hover {
                padding-left: 5px;
            }

            .item-b  > .item-b-fade-in {
                opacity: 0;
                margin: 20px 0 0 0;     
                visibility: hidden;     
                -webkit-transition:opacity 0.4s ease-in-out;
            }

            .item-b:hover > .item-b-fade-in {
                opacity: 1;
                margin: 0;  
                visibility: visible;
            }           
           .three-d-transform {-webkit-transform:translate3d(0,0,0);}
        </style>
    </head>
    <body>      
        <!--Uncomment the following to break the transitions on this page in Safari 5 -->
        <!--<div class="three-d-transform" />-->
        <a class="item-a" href="#">
            Hover For Transition A (margin change)
        </a>
        <div class="item-b" href="#">
            Hover for transition B (Fade-in)
            <div class="item-b-fade-in">
                <a href="#">One</a>
                <a href="#">Two</a>
            </div>
        </div>          
    </body>
</html>

Эксперименты заставляют меня заподозрить, что рендеринг страниц Safari каким-то образом изменяется, если упоминается 3D-преобразование, вызывая мою проблему, но это предположение.

Кто-нибудь видел это и нашел решение?

Я видел этот другой вопрос , но перемещение атрибута позиции в соответствии с этим ответом не оказало на меня никакого влияния.

1 Ответ

1 голос
/ 21 ноября 2011

Я решил эту проблему.В Safari (в отличие от Chrome, кажется) вам нужно указать обратный переход.Поэтому, если у вас есть переход, который происходит при наведении курсора, вам нужно указать переход при наведении курсора.

Если вы этого не сделаете, переход останется «заблокированным» в неполном состоянии до следующего переходана странице.

В качестве дополнительного примечания существует ряд побочных эффектов, связанных с z-index и позиционированием в Safari при использовании 3D-преобразований на странице (которые приводят меня в тупик при исследовании этого.)

...