Background image not showing on iOS

Question

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:

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

Here is the CSS, the background-image value was applied by 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.

Answer 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; 
    }

Answer 2

Set the background-size after 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;
}

Answer 3

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