Исправлено положение фона на iOS

У меня есть веб-сайт с фиксированным фоном с полным фоном, который контент «плавает» выше. Он отлично работает в настольных браузерах, но фиксированный фон заканчивается прокруткой на iPad и других планшетах. Это, кажется, общая проблема, но затем я столкнулся с этим сайтом, который, похоже, имеет фиксированный фон даже на iPad.Исправлено положение фона на iOS

http://confitdemo.wordpress.com/

Любой ключ, как они тянут, что от? Я пробовал:

#content-wrapper.posts-page { 
background-attachment: fixed !important; 
background-clip: border-box; 
background-color: transparent; 
background-image: url("image path"); 
background-origin: padding-box; 
background-position: right top; 
background-repeat: no-repeat; 
background-size: cover; 
}

(Это было скопировано из Firebug, поэтому это не сокращение).

Но не повезло. Кто-нибудь заставляет меня указывать в правильном направлении?

источник

2013-04-15 JeremyE

Я думаю, проблема заключается в том, что ваш стол, скорее всего, изменит размер фона, поэтому, если вы добавите это объявление, в наиболее вероятном колпаке оно должно получиться просто отлично.

background-attachment: fixed !important; 
background-size: cover !important;

Edit:

Если это не работает только другая причина, я могу думать о том, что ИОС должна каким-то образом изменить размер размер тела, чтобы быть столь же большим, как и содержание, что вы должны сделать, это создать DIV внутри тега тела с правильными свойствами

#fixebg{ 
background: url(image.jpg) top; 
height:100%; 
width:100%; 
position:fixed; 
}

Вот решение похож:

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

Edit - 2:

Добавлен скрипку вы можете проверить:

http://jsfiddle.net/uZRXH/3/

А вот ссылка, чтобы попробовать его на вашем IPad:

http://fiddle.jshell.net/uZRXH/3/show

источник

2013-04-15 06:47:24 Breezer

к сожалению, я должен был включать полный код. Я редактировал исходное сообщение, чтобы включить полный код. – JeremyE

@JeremyE Не могли бы вы отправить мне ссылку на ваш сайт, потому что я сделал демоверсию, и она отлично работает для меня. – Breezer

добавлена демонстрационная ссылка на исходное сообщение. Он отлично работает в обычных браузерах, но на iPad фоновые свитки. – JeremyE

Этот веб-сайт использует трюк в мобильных браузерах, пользуясь тем, что в то время как background-attachment: fixed не работает, position: fixed делает, поэтому в мобильных браузерах он просто создает <div>, который остается фиксированным за прокручиваемым контентом.

источник

2014-05-16 22:37:14 rev087

ОК, поэтому я уже построил этот сайт, часть с фиксированным фоном перепуталась бы, если бы я завернул его в div, чтобы дать этому div фиксированное положение. Поэтому я написал это, и он работает на iPhone.

У меня есть фиксированный заголовок, так это было легко использовать, но все, что это ВСЕГДА в верхней части окна просмотра будет делать ...

 if (//on mobile) { 
      var headerH, headerH2, viewportH, sliderH, res 
      viewportH = $(window).height(), 
      headerH2 = 80 //correction when measuring with fixed header, 
      $topheader = $('.top_header'), 
      $slider = $('#twinslider') //the element to check for if in viewport; 
      function getH() { 
       headerH = $topheader.offset().top; 
       sliderH = $slider.offset().top; 
       res = (((headerH - headerH2) - sliderH) + viewportH)/viewportH; 
       if (res > 0 && res < 1.4) { 
        return res; // thats truthy and a value for further calculation 
       } else { 
        return false; 
       } 
      } 
      getH(); 

      setInterval(function(){ // before i listened to scroll, but this was better for performance 
       if (getH()) {//if slider is in viewport 
        $slider.find('li').css({ //the element to set the background pos for 
         'background-position': 'center ' + res * 50 + '%' 
        }, 100); 

       }     
      }, 25); 

     }

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

источник

2015-03-25 09:48:10

1) z-index: -1; должен быть добавлен ко второму подходу Breezer, если у вас есть ссылка изображения в противном случае изображения сохраняются скрытыми (позади фона)

2) такой же подход, я должен был поставить DIV перед остальными содержание следующим образом или страницы, не прокручивать, если содержимое добавляется внутри тегов Div:

<body> <div id="fixedbg"></div>  </body>

источник

2017-01-11 06:08:35 Rafael

Исправлено положение фона на iOS

ответ

Смежные вопросы