Фонове зображення стрибає, коли адресний рядок приховує iOS / Android / Mobile Chrome

Зараз я розробляю чуйний сайт за допомогою Twitter Bootstrap.

Сайт має повноекранне фонове зображення у мобільному / планшетному / робочому столі. Ці зображення обертаються і зникають через кожне, використовуючи два діви.

Це майже ідеально, крім одного питання. За допомогою iOS Safari, Android Browser або Chrome на Android фон трохи підскакує, коли користувач прокручує сторінку вниз і спричиняє приховування адресного рядка.

Сайт тут: http://lt2.daveclarke.me/

Відвідайте його на мобільному пристрої та прокрутіть униз, і вам слід побачити розмір / переміщення зображення.

Код, який я використовую для фону DIV, такий:

#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

Всі пропозиції ласкаво просимо - цим займаюсь голову протягом певного часу !!

Ця проблема викликана тим, що рядки URL-адреси скорочуються / ковзають із шляху та змінюють розмір диваків # bg1 та # bg2, оскільки вони на 100% зростають та "фіксуються". Оскільки фонове зображення встановлено на "прикриття", воно буде регулювати розмір / положення зображення, оскільки площа містить більше.

Виходячи з чуйного характеру сайту, фон повинен масштабуватися. Я розважаю два можливі рішення:

1) Встановіть висоту # bg1, # bg2 на 100vh. Теоретично це елегантне рішення. Однак у iOS є помилка vh ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Я намагався використовувати максимальну висоту, щоб запобігти проблемі, але це залишилось.

2) На розмір вікна перегляду, якщо він визначається Javascript, не впливає рядок URL. Тому Javascript можна використовувати для встановлення статичної висоти на # bg1 та # bg2 на основі розміру вікна перегляду. Це не найкраще рішення, оскільки це не чистий CSS і є невеликий стрибок зображення при завантаженні сторінки. Однак це єдине життєздатне рішення, яке я бачу, враховуючи помилки "vh" iOS (які, як видається, не виправлені в iOS 7).

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

Зі сторони, я бачив так багато проблем із цими розмірами URL-адрес в iOS та Android. Я розумію мету, але їм дійсно потрібно продумати дивну функціональність і хаос, який вони вносять на веб-сайти. Остання зміна: ви більше не можете "приховувати" рядок URL-адрес на завантаженні сторінки в iOS або Chrome, використовуючи підказки прокрутки.

EDIT: Хоча вищезазначений сценарій прекрасно працює для запобігання зміни розміру фону, він спричиняє помітний розрив, коли користувачі прокручують вниз. Це пояснюється тим, що він підтримує розмір фону до 100% від висоти екрану за вирахуванням URL-рядка. Якщо додати до висоти 60 пікс, як говорить швейцарський, ця проблема відходить. Це означає, що ми не бачимо нижнє 60px фонового зображення, коли присутній URL-рядок, але це заважає користувачам бачити пробіл.

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

Я виявив, що відповідь Джейсона не дуже працює для мене, і я все одно отримую стрибок. Javascript гарантував, що у верхній частині сторінки не було розривів, але фон все ще стрибав, коли адресна панель зникала / з'являлася знову. Так само як і виправлення Javascript, я застосував transition: height 999999sдо div. Це створює перехід тривалістю настільки довгою, що практично застигає елемент.

У мене є аналогічна проблема у заголовку нашого веб-сайту.

html, body {
    height:100%;
}
.header {
    height:100%;
}

Це в кінцевому підсумку стане стрибковим прокруткою на андроїд-хромі, оскільки контейнер .header змінить масштаб після того, як панель url ховається, і палець буде вилучений із екрана.

CSS-рішення:

Додавання наступних двох рядків перешкоджає тому, що смужка URL-адреси ховається та вертикальна прокрутка все ще можлива:

html {
    overflow: hidden;
}
body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

Проблему можна вирішити за допомогою медіа-запиту та певної математики. Ось рішення для орієнтації на портат:

@media (max-device-aspect-ratio: 3/4) {
  height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
  height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
  height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
  height: calc(100vw * 1.778 - 9%);
}

Оскільки vh зміниться, коли панель url зникне, вам потрібно визначити висоту іншим способом. На щастя, ширина вікна перегляду є постійною, а мобільні пристрої мають лише декілька співвідношень сторін; якщо ви можете визначити ширину і співвідношення сторін, трохи математики дасть вам висоту огляду точно так, як слід vh працювати . Ось процес

1) Створіть ряд медіа-запитів для пропорцій, на які потрібно націлити.

• використовуйте співвідношення сторін-пристроїв замість співвідношення сторін, оскільки остання змінять розмір, коли панель URL-адреси відпадає

• Я додав "max" до співвідношення сторін між пристроєм, щоб націлити будь-які співвідношення сторін, які, як правило, дотримуються між найпопулярнішими. Вони не будуть настільки точними, але вони будуть лише для меншості користувачів і все ще будуть досить близькими до належного vh.

• запам’ятайте медіа-запит, використовуючи горизонтальну / вертикальну, тому для перенесення потрібно перегорнути номери

2) для кожного медіа-запиту помножте будь-який відсоток вертикальної висоти, на який потрібно, щоб елемент знаходився в vw на зворотній частині співвідношення сторін.

• Оскільки ви знаєте ширину та відношення ширини до висоти, ви просто помножите потрібний% (у вашому випадку 100%) на співвідношення висота / ширина.

3) Ви повинні визначити висоту смуги URL, а потім мінус висоту. Я не знайшов точних вимірів, але я використовую 9% для мобільних пристроїв у пейзажі, і це, здається, працює досить добре.

Це не дуже елегантне рішення, але інші варіанти теж не дуже хороші, враховуючи, що вони:

• Оскільки ваш веб-сайт здається користувачеві баггі,

• які мають елементи неправильного розміру, або

• Використовуючи javascript для деяких базових стилів,

Недолік - деякі пристрої можуть мати різну висоту смуги URL або співвідношення сторін, ніж найпопулярніші. Однак, використовуючи цей метод, якщо додавання / віднімання кількох пікселів страждає лише невеликій кількості пристроїв, це здається мені набагато кращим, ніж всі, хто має веб-сайт при зміні розміру.

Щоб зробити це простіше, я також створив SASS mixin:

@mixin vh-fix {
  @media (max-device-aspect-ratio: 3/4) {
    height: calc(100vw * 1.333 - 9%);
  }
  @media (max-device-aspect-ratio: 2/3) {
    height: calc(100vw * 1.5 - 9%);
  }
  @media (max-device-aspect-ratio: 10/16) {
    height: calc(100vw * 1.6 - 9%);
  }
  @media (max-device-aspect-ratio: 9/16) {
    height: calc(100vw * 1.778 - 9%);
  }
}

Усі відповіді тут використовують windowвисоту, на яку впливає рядок URL. Всі забули про screenвисоту?

Ось моє рішення jQuery:

$(function(){

  var $w = $(window),
      $background = $('#background');

  // Fix background image jump on mobile
  if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
    $background.css({'top': 'auto', 'bottom': 0});

    $w.resize(sizeBackground);
    sizeBackground();
  }

  function sizeBackground() {
     $background.height(screen.height);
  }
});

Додавання .css() деталі неминуче змінює абсолютний розміщений верхній елемент на вирівняний знизу, так що стрибків взагалі немає. Хоча, я думаю, немає причин не просто додати це до звичайного CSS.

Нам потрібен нюховий агент користувача, оскільки висота екрана на робочих столах не буде корисною.

Також це все припускають #background , що елемент з фіксованим положенням заповнює вікно.

Для пуристів JavaScript (попередження - не перевірено):

var background = document.getElementById('background');

// Fix background image jump on mobile
if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
  background.style.top = 'auto';
  background.style.bottom = 0;

  window.onresize = sizeBackground;
  sizeBackground();
}

function sizeBackground() {
  background.style.height = screen.height;
}

EDIT: Вибачте, що це не відповідає безпосередньо вашій конкретній проблемі з більш ніж одним фоном. Але це один з перших результатів при пошуку цієї проблеми фіксованих фонів, що стрибають на мобільний.

Я також зіткнувся з цим питанням, коли намагався створити вхідний екран, який би охоплював увесь вікно перегляду. На жаль, прийнята відповідь більше не працює.

1) Елементи з встановленою висотою, що дозволяють 100vhзмінювати розмір кожного разу, коли розмір вікна перегляду змінюється, включаючи випадки, коли це викликано (не) появою рядка URL.

2) на $(window).height()значення, що повертаються, також впливає розмір рядка URL.

Одне рішення - "заморозити" елемент, використовуючи, transition: height 999999sяк запропоновано у відповіді AlexKempton . Недоліком є ​​те, що це ефективно вимикає адаптацію до всіх змін розміру вікна перегляду, включаючи ті, що викликані обертанням екрана.

Тому моє рішення - керувати змінами вікна перегляду вручну за допомогою JavaScript. Це дозволяє мені ігнорувати невеликі зміни, які можуть бути викликані URL-адресою і реагувати лише на великі.

function greedyJumbotron() {
    var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet

    var jumbotron = $(this);
    var viewportHeight = $(window).height();

    $(window).resize(function () {
        if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) {
            viewportHeight = $(window).height();
            update();
        }
    });

    function update() {
        jumbotron.css('height', viewportHeight + 'px');
    }

    update();
}

$('.greedy-jumbotron').each(greedyJumbotron);

EDIT: Я фактично використовую цю техніку разом із height: 100vh. Сторінка візуалізується належним чином з самого початку, а потім запускається javascript і починає керувати висотою вручну. Таким чином, мерехтіння не відбувається взагалі, коли сторінка завантажується (або навіть згодом).

Рішення , яке я зараз використовую, щоб перевірити userAgentна , $(document).readyщоб побачити , якщо це один з ображають браузерів. Якщо це так, виконайте наступні дії:

1. Встановіть відповідні висоти на поточну висоту вікна перегляду, а не на 100%
2. Збережіть поточне горизонтальне значення вікна перегляду
3. Потім $(window).resizeоновіть відповідні значення висоти лише тоді, коли новий розмір горизонтального вікна перегляду відрізняється від початкового значення
4. Зберігайте нові горизонтальні та вертикальні значення

Необов’язково, ви також можете перевірити дозвіл вертикальних розмірів лише тоді, коли вони перевищують висоту адресного рядка.

О, і адресний рядок впливає $(window).height. Див.: Адреса: рядок браузера мобільних веб-переглядачів (хром) змінює $ (window) .height (); створення розміру тла: розмір кришки кожного разу, коли JS "Вікно" ширина-висота проти "екран" ширина-висота?

Я знайшов дійсно просте рішення без використання Javascript:

transition: height 1000000s ease;
-webkit-transition: height 1000000s ease;
-moz-transition: height 1000000s ease;
-o-transition: height 1000000s ease;

Все це - затримка руху, так що це неймовірно повільно, що це не помітно.

Моє рішення включало трохи JavaScript. Зберігайте 100% або 100vh на діві (це дозволить уникнути появи div при початковому завантаженні сторінки). Потім, коли сторінка завантажується, захопіть висоту вікна та застосуйте її до відповідного елемента. Уникайте стрибка, тому що тепер у вас є статична висота на вашому діві.

var $hero = $('#hero-wrapper'),
    h     = window.innerHeight;

$hero.css('height', h);

Я створив рішення ванільного javascript для використання VH-одиниць. Використання VH майже в будь-якому місці відбувається за допомогою адресних рядків, що мінімізують прокрутку. Щоб виправити вимкнений файл, який відображається, коли сторінка перемальовується, у мене є цей js, який захопить всі ваші елементи за допомогою VH-одиниць (якщо ви даєте їм клас .vh-fix) та надасть їм окреслені висоти пікселів. По суті, заморожуючи їх на потрібній нам висоті. Ви можете зробити це під час обертання або зміни розміру вікна перегляду, щоб залишатися чутливими.

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {
    el.style.height = el.clientHeight + 'px'
  }
}

Це вирішило всі мої випадки використання, сподіваюся, це допомагає.

це моє рішення, щоб вирішити цю проблему, я додав коментарі безпосередньо до коду. Я перевірив це рішення і працює чудово. Сподіваюся, що ми будемо корисні для всіх, хто має однакові проблеми.

//remove height property from file css because we will set it to first run of page
//insert this snippet in a script after declarations of your scripts in your index

var setHeight = function() {    
  var h = $(window).height();   
  $('#bg1, #bg2').css('height', h);
};

setHeight(); // at first run of webpage we set css height with a fixed value

if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property
  var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put 
  var changeHeight = function(query) {                      //mobile device in landscape mode
    if (query.matches) {                                    // if yes we set again height to occupy 100%
      setHeight(); // landscape mode
    } else {                                                //if we go back to portrait we set again
      setHeight(); // portrait mode
    }
  }
  query.addListener(changeHeight);                          //add a listner too this event
} 
else { //desktop mode                                       //this last part is only for non mobile
  $( window ).resize(function() {                           // so in this case we use resize to have
    setHeight();                                            // responsivity resisizing browser window
  }); 
};

Це найкраще рішення (найпростіше) понад усе, що я спробував.

... І це не утримує рідного досвіду адресного рядка !

Наприклад, ви можете встановити висоту за допомогою CSS на 100%, а потім встановити висоту 0,9 * від висоти вікна в px за допомогою JavaScript, коли завантажується документ.

Наприклад, з jQuery:

$("#element").css("height", 0.9*$(window).height());

)

На жаль, не існує нічого, що працює з чистим CSS: P, але також будьте неповноцінними vhта vwє глючними на iPhone - використовуйте відсотки.

Я встановлюю свій елемент ширини, за допомогою JavaScript. Після того, як я встановив де vh.

html

<div id="gifimage"><img src="back_phone_back.png" style="width: 100%"></div>

css

#gifimage {
    position: absolute;
    height: 70vh;
}

javascript

imageHeight = document.getElementById('gifimage').clientHeight;

// if (isMobile)       
document.getElementById('gifimage').setAttribute("style","height:" + imageHeight + "px");

Це працює для мене. Я не використовую jquery ect. тому що я хочу, щоб він завантажився якомога швидше.

Минуло кілька годин, щоб зрозуміти всі деталі цієї проблеми та визначити найкраще виконання. Виявляється, станом на квітень 2016 року лише у iOS Chrome є ця проблема. Я спробував на Android Chrome і iOS Safari - обидва були добре без цього виправлення. Отже, виправлення для iOS Chrome, яке я використовую:

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div-with-background-image').css('height', screenHeight + 'px');
});

Проста відповідь, якщо ваш фон дозволяє, чому б не встановити розмір тла: на те, що просто покриває ширину пристрою медіа-запитами і використовувати поряд з позицією: after: fix; рубати тут .

IE: фоновий розмір: 901px; для будь-яких екранів <900px? Не ідеальний і не чуйний, але працював у чарівному режимі для мобільних пристроїв <480px, оскільки я використовую абстрактний BG.

Я використовую це вирішення: виправте висоту bg1 на завантаженні сторінки за:

var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;

Потім приєднайте слухач подій зміни розміру до Window, який робить це: якщо різниця у висоті після зміни розміру менше 60 пікселів (що-небудь більше, ніж висота смуги URL-адреси), тоді нічого не робіть, а якщо вона більша за 60 пікселів, то встановіть висоту bg1 знову на висоту свого батька! повний код:

window.addEventListener("resize", onResize, false);
var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;
var oldH = BG.parentElement.clientHeight;

function onResize() {
    if(Math.abs(oldH - BG.parentElement.clientHeight) > 60){
      BG.style.height = BG.parentElement.clientHeight + 'px';
      oldH = BG.parentElement.clientHeight;
    }
}

PS: Цей клоп так дратує!

Схожа на відповідь @AlexKempton (не можу прокоментувати вибачення)

Я використовую тривалі затримки переходу, щоб запобігти зміні розміру елемента.

наприклад:

transition: height 250ms 600s; /*10min delay*/

Компроміс із цим полягає в тому, що він запобігає зміні розміру елемента, включаючи обертання пристрою, однак, ви можете використовувати деякі JS для виявлення orientationchangeта скидання висоти, якщо це було проблемою.

Для тих, хто хотів би прослухати фактичну внутрішню висоту та вертикальну прокрутку вікна, коли браузер мобільних пристроїв Chrome переводить рядок URL із показаного на прихований та навпаки, єдине знайдене нами рішення - встановити функцію інтервалу, і вимірюють невідповідність window.innerHeightпопереднього значення.

Це вводить цей код:

var innerHeight = window.innerHeight;
window.setInterval(function ()
{
  var newInnerHeight = window.innerHeight;
  if (newInnerHeight !== innerHeight)
  {
    var newScrollY = window.scrollY + newInnerHeight - innerHeight;
    // ... do whatever you want with this new scrollY
    innerHeight = newInnerHeight;
  }
}, 1000 / 60);

Я сподіваюся, що це стане в нагоді. Хтось знає краще рішення?

Рішення, яке я придумав, коли виникли подібні проблеми, було встановити висоту елемента під window.innerHeightчас кожного запуску touchmoveподії.

var lastHeight = '';

$(window).on('resize', function () {
    // remove height when normal resize event is fired and content redrawn
    if (lastHeight) {
        $('#bg1').height(lastHeight = '');
    }
}).on('touchmove', function () {
    // when window height changes adjust height of the div
    if (lastHeight != window.innerHeight) {
        $('#bg1').height(lastHeight = window.innerHeight);
    }
});

Це робить елемент охоплює рівно 100% доступного екрану в усі часи, не більше і не менше. Навіть під час адресного рядка ховаються чи показуються.

Тим не менш, шкода, що нам доведеться придумати такі виправлення, де просто position: fixedповинні працювати.

Підтримуючи власні властивості (змінні) CSS в iOS, ви можете встановлювати їх за допомогою JS та використовувати їх лише на iOS.

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
  document.body.classList.add('ios');
  const vh = window.innerHeight / 100;
  document.documentElement.style
    .setProperty('--ios-10-vh', `${10 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-50-vh', `${50 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-100-vh', `${100 * vh}px`);
}

body.ios {
    .side-nav {
        top: var(--ios-50-vh);
    }
    section {
        min-height: var(--ios-100-vh);
        .container {
            position: relative;
            padding-top: var(--ios-10-vh);
            padding-bottom: var(--ios-10-vh);
        }
    }
}

Моя відповідь - для всіх, хто заходить сюди (як і я), щоб знайти відповідь на помилку, викликану прихованою адресою голого / інтерфейсу браузера.

Прихований адресний рядок викликає подія зміни розміру. Але на відміну від інших подій розміру, наприклад переходу в ландшафтний режим, це не змінює ширину вікна. Тому моє рішення полягає в підключенні до події зміни розміру та перевірки, чи однакова ширина.

// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});