cross-browser - Safari でのみ機能する CSS トランジション

Question

css をプレフィックスとして付けていますが、トランジションはサファリでしか機能しません。Opera、Chrome、Firefox の最新バージョンでテストしています。ホバーすると画像が移動し、別の色のアイコンが表示されますが、Safari のようなトランジション効果はありません。

これが私のscssです：

li {
                height: em(36);
                width: em(28);
                display: inline-block;

                }

            li:first-child {
                background-image: url(social.svg);
                background-position: 84px 0px;

                /*transition-property*/
                -webkit-transition-property:transition;
                   -moz-transition-property:transition;
                     -o-transition-property:transition;
                        transition-property:transition;
                /*transition-duration*/
                -webkit-transition-duration:350ms;
                   -moz-transition-duration:350ms;
                     -o-transition-duration:350ms;
                        transition-duration:350ms;

                &:hover{
                background-position: 84px -36px;

                    }

                }

            li:nth-child(2) {
                background-image: url(social.svg);
                background-position: 56px 0px;

                /*transition-property*/
                -webkit-transition-property:transition;
                   -moz-transition-property:transition;
                     -o-transition-property:transition;
                        transition-property:transition;
                /*transition-duration*/
                -webkit-transition-duration:350ms;
                   -moz-transition-duration:350ms;
                     -o-transition-duration:350ms;
                        transition-duration:350ms; 

                &:hover{
                background-position: 56px -36px;

                    }

                }

            li:nth-child(3) {
                background-image: url(social.svg);
                background-position: 28px 0px;

                /*transition-property*/
                -webkit-transition-property:transition;
                   -moz-transition-property:transition;
                     -o-transition-property:transition;
                        transition-property:transition;
                /*transition-duration*/
                -webkit-transition-duration:350ms;
                   -moz-transition-duration:350ms;
                     -o-transition-duration:350ms;
                        transition-duration:350ms;

                &:hover{
                background-position: 28px -36px;

                    }

                }

なぜそれが機能しないのか、私には本当にわかりません。どんな助けでも素晴らしいでしょう。

前もって感謝します、アレックス