Firefox seems to be causing some issues with the overflow: hidden; property, as I have read in related stories. To address this, I tried adding clip-path: inset(0 0 0 0); and even included -moz-overflow: hidden;. While this did hide the overflow, it left a large blank space where the overflow would have been. How can I eliminate this extra space?
Below is my 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;
}
The issue seems to be with the rotating background pseudo-element, which is intentionally larger than its parent element but should be cropped using CSS.
Visit the website here: www.satya-ame-art.com
This problem only occurs at the footer's end on this specific website. It works fine on Chrome and Safari...
Thank you for your assistance!