Firefox Bug с CSS-липким положением и клип-патомCSS

Разбираемся в CSS
Ответить
Anonymous
 Firefox Bug с CSS-липким положением и клип-патом

Сообщение Anonymous »

Я сделал этот простой Codepen.
https://codepen.io/calulu/pen/oppzoxk
На хроме он работает отлично. (Если вы не видите ничего прокручивать вниз и попытаться подчеркнуть что-то в центре секции). < /P>
вместо использования клип-пата, z-index: -1; Решает ошибку. Я что-то не хватает в Bugzilla?

Код: Выделить всё

.main-content {
height: 20vh;
}

/* Sticky footer styling */
.sticky-footer {
height: 800px;
/*comment clip-path and uncomment z-index */
/* z-index: -1; */
clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
background: gray;
}

.footer-container {
position: relative;
height: calc(100vh + 800px);
top: -100vh;
}

.footer-content {
height: 800px;
position: sticky;
top: calc(100vh - 800px);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}< /code>


Hello



Sticky






Подробнее здесь: https://stackoverflow.com/questions/796 ... -clip-path
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»