Css doesn't Work on Iphone

Question

Here's my fiddle : http://jsfiddle.net/hLza6qa6/3/

when i test my fiddle on iPhone menu links on overlay does not appear but when i test it on android device , it's all Ok .

 .menu-links{
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        box-shadow: 0 0 0;
        display: block;
        float: none;
        opacity: 0;
        padding-right: 7px;
        position: absolute;
        text-align: center;
        transition: all 300ms ease-out 0s;
        -webkit-transition: all 300ms ease-out 0s;
        -moz-transition: all 300ms ease-out 0s;
        -o-transition: all 300ms ease-out 0s;
        width: 100%;
        z-index: 800;
        right: 0;
        left: 0;
    }  

Any advice would be great ? Thanks

Answer 1

Try adding a -webkit-transform below each transform property.

According to the compatibility table , transform is supported with -webkit- on Safari