chrome bug fullscreen background redraw

Я разместил на своем сайте все экранные размеры-пригонки, случайные-с-обновить фоновое изображение. Эффект хорошо работает в каждом браузере, но Chrome. Усугубление происходит, когда вы прокручиваете более длинную страницу и оставляете ее по ссылке, а затем возвращаетесь на эту страницу или остаетесь на странице и просто обновляетесь. Фон будет отображаться только в тот момент, когда вы прокрутите. Отлично работает, если вы находитесь в верхней части страницы.chrome bug fullscreen background redraw

Пример долго страница моего сайта: http://madcoversite.com/ugoi-master.html

Прокрутка вниз любой длины, а затем обновить. Фон будет полугрузиться или вообще не загружаться.

My Javascript для случайного изображения:

function changeImg(imgNumber) { 
var myImages = ["back100-1-blur.jpg","back150-1-blur.jpg","back150-2-blur.jpg","back050-2-blur.jpg","back050-3-blur.jpg","back050-4-blur.jpg","back050-5-blur.jpg","back050-6-blur.jpg","back050-7-blur.jpg","back200-1-blur.jpg","back200-2-blur.jpg","back300-1-blur.jpg","back100-2-blur.jpg"]; 
var imgShown = document.body.style.backgroundImage; 
var newImgNumber = Math.floor(Math.random()*myImages.length); 
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')'; 
} 
window.onload=changeImg;

Моего CSS для расширяющихся изображений на любой размер экрана:

body { 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

HTML ниже конец головки:

<BODY TEXT=000000 LINK=3232CD VLINK=6B238E topmargin=0 onselectstart="return false">

I были замечены аналогичные обсуждения с изменением исправлено t o прокрутить. Также обсуждались изменения фонового размера обложки. Не решает проблему. Я даже искал творческий способ сделать Chrome прокручивать один пиксель после загрузки.

Надеясь, что есть правильный способ исправить.

Спасибо!

источник

2014-10-23 Doug Gilford

Ваша загрузка вашего изображения на теге тела, а не в CSS. Попробуйте поместить этот код:

background-image: url(http://madcoversite.com/back050-5-blur.jpg);">

в этом:

body { 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Окончательный результат:

body { 
    background-image: url(http://madcoversite.com/back050-5-blur.jpg); 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Вам может понадобиться, чтобы играть с

background-image:

Пока вы не получите для отображения того, как вы хотите.

источник

2014-10-23 20:10:36

Спасибо Оскар. Вы можете что-то сказать. Возможно, Chrome нуждается в создании фонового изображения? Мне интересно, как я включу случайные изображения из Javascript. –

Поскольку вы генерируете эти изображения из javascript, я думаю, что самое лучшее, что вы можете сделать, это выбросить конечный результат javascript в переменную, а затем использовать эту переменную в вашем файле css. Я знаю, что это делается при использовании LESS или SASS. либо один из них позволит вам использовать переменные в CSS. –

Вот хороший пример использования переменных в CSS. Http://css-tricks.com/css-variables-with-php/ –

chrome bug fullscreen background redraw

ответ

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