Grow your CSS skills. Land your dream job.

Safari transition problem

  • # May 8, 2013 at 7:21 pm

    Hello. I came across a problem in Safari. In every other browser it works fine but Safari has a problem. I’m using transitions on an arrow. Here is the html and part of CSS. I’m changing the padding-right on hover

    HTML:

    CSS:

    .readMore_{
    display:inline-block;
    -webkit-transition:padding 0.08s ease-in-out;
    -moz-transition:padding 0.08s ease-in-out;
    -ms-transition:padding 0.08s ease-in-out;
    -o-transition:padding 0.08s ease-in-out;
    transition:padding 0.08s ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-perspective:1000;
    }
    .readMore:hover .readMore_{
    background-color:#0b83aa;
    padding-right:22px;
    }

    Here is the picture of the problem:
    [http://s21.postimg.org/8afp9rxvr/transition.png](http://s21.postimg.org/8afp9rxvr/transition.png “Picture”)

    Thanks for the help!

    # May 8, 2013 at 7:21 pm

    :)

    # May 9, 2013 at 5:16 am

    Is this solved?

    Also, there is not enough CSS there for us to created a Codepen.

    …and there is no such setting as

    position:inline-block;

    # May 9, 2013 at 4:13 pm

    Sorry my mistake. I will post the whole CSS. I meant display :) I made a code pen.

    http://cdpn.io/fAbuc

    # May 9, 2013 at 10:00 pm

    I see now that the codepen one works OK in safari. So it has to be the problem in one of the inherited styles. I’ll check.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".