背景png没有显示移动safari，chrome ...显示精美的桌面浏览器

Question

我有一个列表，我想要一排图标。在悬停时，它们会更改图像精灵中的位置。这一切在我桌面上的Chrome和Safari中运行良好，但在我的实际设备（iphone 6）上查看这些图像没有显示。我也没有任何其他图片的问题。

有什么想法吗？

<section id="socialbar">
        <div class="row">
            <div class="medium-12 large-12 columns">
                <nav>
                    <ul>
                        <li><a href="#" id="facebook"></a></li>
                        <li><a href="#" id="twitter"></a></li>
                        <li><a href="#" id="instagram"></a></li>
                        <li><a href="#" id="youtube"></a></li>
                    </ul>
               </nav>   
            </div>
        </div>
    </section>

#socialbar { background-color: #ceb55f; padding: 30px 0px 30px 0px; text-align: center;}
#socialbar ul { list-style-type: none; padding: 0px; margin: 0px;}
#socialbar ul li { display: inline-block; list-style-type: none; padding: 0px 10px 0px 10px;}
#socialbar li a { display: block; width: 60px; height: 60px; background-image: url(../icons/icon-facebook@2x.png); background-size: 60px 120px; background-repeat: no-repeat; background-position: 0 0;}
#socialbar li a:hover { background-position: 0 -60px; }

#facebook { background-image: url(../icons/icon-facebook@2x.png); background-size: 60px 120px; background-repeat: no-repeat; background-position: 0 0; }
#twitter { background-image: url(../icons/icon-twitter@2x.png); background-size: 60px 120px; background-repeat: no-repeat; background-position: 0 0; }
#instagram { background-image: url(../icons/icon-instagram@2x.png); background-size: 60px 120px; background-repeat: no-repeat; background-position: 0 0; }
#youtube { background-image: url(../icons/icon-youtube@2x.png); background-size: 60px 120px; background-repeat: no-repeat; background-position: 0 0; }