Я знаю, что Firefox немного несовместим с переполнением: скрыто;и я прочитал соответствующие истории. Итак, поверх переполнения: скрыто;Свойство, я также добавил клип-путь: вставка (0 0 0 0);и даже -moz-overflow: скрытый ;. В результате переполнение действительно скрыто, но там, где было бы переполнение, остается большое пустое пространство. Как избавиться от этого?
Вот мой CSS:
.site-footer {
position: relative;
display: table;
-moz-overflow: hidden;
overflow: hidden;
clip-path: inset(0 0 0 0);
background-color: #10142F;
width: 100%;
padding-top: 30px;
}
.site-footer::before{
content: "";
width: 350%;
max-width: 350%;
display: table-cell;
height: 120%;
left: -125%;
top: -10%;
position: absolute;
z-index: 0;
background-image: url('media/backgrounds/blue-planet-4-1700-2.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: spin 160s linear reverse infinite;
animation: spin 160s linear reverse infinite;
}
Проблемным элементом является вращающийся фоновый псевдоэлемент, который больше, чем родительский элемент (специально),но я должен быть в состоянии отрезать с помощью CSS.
Вот веб-сайт: www.satya-ame-art.com
Эта проблема возникает в оченьконец нижнего колонтитула этого сайта. На Chrome и Safari все работает нормально ...
Спасибо большое !!