Why does iOs Safari show full size of background-image? - ios

Question

I'm working on a site where you have some boxes with background-images as thumbnails. I have to use background-image because the CMS we are working on is pretty old-dated and the client won't change (mon€y is the main-problem).
i figured out a strange behavior in the iOs Safari on the iPad2 & iPhone5 (latest iOS) and don't know why.
Here's my code:
a img,
.thumb,
figcaption,
a:hover .thumb {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.thumb {
height: 250px;
margin-bottom: 28px;
overflow: hidden;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
figcaption {
background-color: #b61910;
background-color: rgba(182, 25, 16, .85);
position: absolute;
height: 39px;
bottom: 35px;
color: white;
width: calc(100% - 30px);
}
figcaption h3 {
font-style: normal;
position: absolute;
bottom: 5px;
margin-top: 0;
margin-bottom: 0;
padding: 10px 0 0 5px;
transition: transform 0.3s;
transform: translate3d(0, 0%, 0);
}
a:hover h3 {
transform: translate3d(0, -20%, 0);
text-shadow: 1px 1px 1px #000;
}
a:hover figcaption {
height: 5px;
}
a:hover .thumb {
background-size: 120% 120%;
opacity: .8
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a href="">
<div class="col-sm-12">
<figure class="thumb" style="background-image:url(http://lorempixel.com/output/food-h-c-850-890-7.jpg)">
<figcaption>
<h3>Product-Title</h3>
</figcaption>
</figure>
</div>
</a>
</div>
</div>
On my Desktop it shows the whole image but on iOS it looks like it shows the original size inside the thumbnail-box.
How can i solve this problem?
Any help would be great :)
Thanks
moesphemie

Answer 1

Maybe? https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
Code:
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;