Почему iOs Safari показывает полный размер фонового изображения?

Question

Я работаю над сайтом, где у вас есть несколько рамок с фоновыми изображениями в виде миниатюр. Я должен использовать background-image, потому что CMS, над которой мы работаем, устарела, и клиент не изменится (главная проблема - деньги).

я выяснил странное поведение в iOs Safari на iPad2 и iPhone5 (последняя версия iOS) и не знаю почему.

Вот мой код:

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>

На моем рабочем столе он показывает все изображение, но на iOS это выглядит так, как будто он показывает оригинальный размер внутри поля миниатюр. Как я могу решить эту проблему?

Любая помощь будет отличной:) Спасибо

moesphemie

Answer 1

Может быть? https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

Код:

  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;