没有在iOS上显示的背景图像

I have a div with a background image applied dynamically with JS. It works great except in iOS - both in iOS Safari & iOS Chrome, the background image just doesn't show. Very weird I didn't find any answer for that online. Here is how it looks normally:

我有一个带有JS动态应用的背景图像的div。它在iOS中很有用 - 在iOS Safari和iOS Chrome中,背景图像都没有显示。非常奇怪我没有在网上找到任何答案。以下是它的正常表现:

And here it how it looks on iOS (ipad and iphone):

这是它在iOS(ipad和iphone)上的外观:

Here is the CSS, the background-image value was applied by JS:

这是CSS,JS应用了背景图像值:

.NavFrame {
  width: 104px;
  height: 58px;
  background-position: center center;
  background-size: cover;
  margin-right: 2%;
  background-image: url(http://www.test.com/test.jpg);
}

Any help will be appreciated.

任何帮助将不胜感激。

UPDATE: Thank you all for the answers, however eventually it was some bug in my JS code. Anyway hope it can help someone else.

更新:谢谢大家的答案,但最终这是我的JS代码中的一些错误。无论如何希望它可以帮助别人。

3 个解决方案

#1

try like this

试试这样

.NavFrame {
      width: 104px;
      height: 58px;
      background-position: center center;

      margin-right: 2%;
      background-image: url(http://www.test.com/test.jpg);
      background-size: cover; 
    }

#2

Set the background-size after background-image:

在background-image之后设置背景大小:

.NavFrame {
  width: 104px;
  height: 58px;
  margin-right: 2%;
  background-image: url(http://www.test.com/test.jpg);
  background-position: center center;
  background-size: cover;
}

Or shorthand:

.NavFrame {    
  background: url(http://www.test.com/test.jpg) center center / cover;
}

#3

This issue is already discussed in * pl. refer to the below link Background image not showing on iPad and iPhone

这个问题已在* pl中讨论过。请参阅以下链接背景图像未在iPad和iPhone上显示