Hide scroll bars when png rotates
-
20-12-2019 - |
سؤال
I am trying to rotate two png rings on a page. Everything is working except in Firefox scroll bars are appearing and moving up and down. I assume this is because of the square png rotating and bumping the edges.
Any ideas? CSS below:
@-webkit-keyframes rings {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rings {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rings {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rings {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.rotating-rings {
position: absolute;
z-index: -5;
width: 90%;
height: 90%;
overflow: none;
}
#ring-1 {
overflow: hidden;
position: absolute;
width: 90%;
-webkit-animation-name: rings;
-webkit-animation-duration: 9s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-transition-timing-function: linear;
-moz-animation-name: rings;
-moz-animation-duration: 9s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-transition-timing-function: linear;
-o-animation-name: rings;
-o-animation-duration: 9s;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-transition-timing-function: linear;
animation-name: rings;
animation-duration: 9s;
animation-iteration-count: infinite;
animation-direction: normal;
transition-timing-function: linear;
}
#ring-2 {
overflow: hidden;
position: absolute;
width: 90%;
-webkit-animation-name: rings;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
-webkit-transition-timing-function: linear;
-moz-animation-name: rings;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: reverse;
-moz-transition-timing-function: linear;
-o-animation-name: rings;
-o-animation-duration: 10s;
-o-animation-iteration-count: infinite;
-o-animation-direction: reverse;
-o-transition-timing-function: linear;
animation-name: rings;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: reverse;
transition-timing-function: linear;
}
المحلول
Try applying overflow:hidden
for the parent element of the image
لا تنتمي إلى StackOverflow