it-roy-ru.com

Фиксированная позиция фона на iOS

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

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, поэтому это не сокращение).

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

18
JeremyE

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

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

Правка:

Если это не работает только по другой причине, о которой я могу подумать, это то, что ios должен каким-то образом изменить размер тела, чтобы он стал таким же большим, как и контент, тогда вам нужно создать div внутри тега body с правильными свойствами.

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

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

Как я могу установить фиксированное положение Фоновое изображение в приложении jquery mobile для iPhone с помощью Phonegap

Правка - 2:

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

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

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

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

7
Breezer

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

7
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); 

        }

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

0
Sjerp van Wouden

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

2) При том же подходе мне пришлось поместить div перед остальным содержимым, как указано ниже, или страница была недоступна для прокрутки, если содержимое добавлено внутри тегов div:

<body> <div id="fixedbg"></div> <!-- CONTENT HERE --> </body>

0
Rafael