Home/ Questions/Q 6853447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:30:47+00:00

In Safari 5 adding a reference to a 3D transition breaks my 2D transitions.

  • 0

In Safari 5 adding a reference to a 3D transition breaks my 2D transitions. I am using version 5.1.1 (7534.51.22).

The following code demonstrates:

<!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>

Experimentation leads me to suspect that Safari page rendering is somehow modified if a 3D transform is referenced, causing my issue, but this is speculation.

Has anyone seen this and found a solution?

I have seen this other question, but moving the position attribute per that answer had no effect for me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have resolved this issue. In Safari (unlike Chrome, it seems) you need to specify the reciprocal transition. So if you have a transition that occurs when you hover over, you need to specify the transition when you hover off.

    If you do not do this, the transition remains “locked” in an incomplete state until another transition on the page is invoked.

    As a side note, there are a number of side effects related to z-index and positioning in Safari when using 3D transforms on a page (that lead me down dead ends while investigating this.)

    • 0