Images set with background-image don't show in iOS - ios

Question

I have this simple html that uses a tiny bit of bootstrap:
<div id="A" class="col-4">
<div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
*some content*
</div>
And its corresponding CSS:
.img { width: 100%; height: 100%; }
Everything is in this pen : https://codepen.io/anon/pen/EbBGQw
The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :
However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :
I've done some digging and cleared some potential culprits :
I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand
What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.
Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?

Answer 1

When you set the height to 100% :
The height will only be as large as what is inside the element.
If there is nothing inside, the height will be 0.
If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
.img {
width: 100%;
height: 100%;
background-image: url("image.jpg");
}
<div class="img"><p>Testing</p></div>

Answer 2

After more digging, and the suggestion from #Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.
In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.
The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew