Предоставление фонового изображения Firefox

Question

У меня проблема при использовании титульной страницы на моем веб-сайте. Обложка, страница, состоящая из изображения, охватывающего все окно браузера, загружается правильно во всех браузерах, но когда я прокручиваю вниз, а затем снова изображение искажается (только при использовании firefox). Самый простой способ объяснить - это просто показать веб-сайт: http://arkad.tlth.se. CSS для фонового изображения:

.site-wrapper-inner { 
display: table-cell; 
vertical-align: top; 
background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

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

background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100%/cover transparent; 

Answer 1

Я могу подтвердить, что проблема возникла в Firefox. Фоновое изображение отображается в Chrome.

Проблема в Firefox исчезает, если вы меняете display: table-cell на display: block.

Я подозреваю, что причиной возникновения проблемы является вычислительная машина высоты таблицы таблицы Firefox.

Я бы попробовал другой режим отображения, кроме таблицы.

Я пробовал использовать display: table с height: 100% и width: 100%, что близко к , что вам нужно. Могут потребоваться некоторые проб и ошибок.

Я смог воспроизвести проблему, как показано ниже (ячейки таблицы показывают проблему с рисунком).

html, body { 
 
    margin: 0; 
 
} 
 
div { 
 
background: url(http://placekitten.com/2000/2000) no-repeat center fixed transparent; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
background-size: cover; 
 
width: 100%; 
 
height: 400px; 
 
} 
 
div.bg-cell { 
 
    border: 2px dashed red; 
 
    display: table-cell; 
 
    height: 400px; 
 
    width: 1000px; /* the width is for demo only... */ 
 
} 
 
div.bg-block { 
 
    border: 2px dashed blue; 
 
    display: table; /* block also works... */ 
 
}

<div class="bg-cell"></div> 
 
<div class="bg-block"></div>

Answer 2

Попробуйте это:

.site-wrapper { 
display: block; 
vertical-align: top; 
background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

И удалить '.Выходные-обертку-внутреннее' правило.