如何使移动版 Safari 正确显示背景 gif

Question

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


    #loader {
        位置：固定；
        左：50%；
        顶部：50%；
        z-索引：10000；
        边界半径：50%；
        边框：5px 实心#3AACE2；
        宽度：128px；
        高度：128px；
        边距：-76px 0 0 -76px；
        背景：url(/content/images/loader.gif);
        背景尺寸：128px 128px；
    }

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

Answer 1

请在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>

如何使移动版 Safari 正确显示背景 gif

How to make mobile Safari show a background gif properly

html

css

gif

mobile-safari