时间戳

首页 > 解决方案 > 如何让手机 Safari 正确显示背景 gif

html - 如何让手机 Safari 正确显示背景 gif

问题描述

我正在尝试将加载微调器添加到 Web 应用程序，在该应用程序中，我已经获得了一个应该用作图标的动画 gif。现在我正在使用最初通过 CSS 隐藏的 div 执行此操作，然后在我想要指示加载时显示。我在此 div 上使用以下 CSS，以便在显示加载 gif 时出现在屏幕中央

    #装载机{
        位置：固定；
        左：50%；
        最高：50%；
        z 指数：10000；
        边界半径：50%；
        边框：5px 实心#3AACE2；
        宽度：128px；
        高度：128px；
        边距：-76px 0 0 -76px；
        背景：网址（/content/images/loader.gif）；
        背景尺寸：128px 128px；
    }

这在台式机和 android 设备上运行良好，但在移动 Safari（iPad 和 iPhone 上）中不显示 gif。当显示 div 时，所有可见的都是边框。我相信这与 div 一开始是隐藏的，所以浏览器不会下载图像有关。所以我不确定是否有办法让它下载图像，或者是否有更好的方法来完成这样的加载微调器。

标签： htmlcssmobile-safarigif

解决方案

请在 safari 中测试。我为 safari 添加了 -webkit

.loader {
  position: fixed;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 128px;
  height: 128px;
  margin: -76px 0 0 -76px; 
  border: 16px solid #f3f3f3;
  border-top: 16px solid #fff;
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;

}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>


<div class="loader"><img src="https://www.w3schools.com/html/programming.gif" alt="Computer man" style="width:48px;height:48px;"></div>

</body>
</html>

推荐阅读