I am encountering an issue with a responsive circular div that has a background gradient. When adjusting the background size, I noticed that they do not match in webkit and Firefox browsers.
However, setting the background-size to 100% / auto resolves this discrepancy:
But when I set the background-size to other values such as auto 200%, there is a difference in how Safari, Chrome, and Firefox display the image.
- Safari and Chrome show the image correctly
- Firefox does not render it as expected
Interestingly, if I set the background-size to auto 300%, Firefox displays it correctly but then it becomes too large in Webkit browsers. Additionally, using -moz-background-size for Firefox or -webkit-background-size for Webkit does not work effectively due to newer versions prioritizing the background-size property.
Here is the CSS style used:
.glasses {
display: none;
width: 8%;
height: 0;
padding-bottom: 8%;
border-radius: 50%;
position: absolute;
top: 37.6%;
z-index: 3;
transform: none;
background: linear-gradient(135deg, rgba(234,246,254,1) 25%,rgba(10,39,58,1) 25%,rgba(10,39,58,1) 50%,rgba(10,39,58,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 75%,rgba(10,39,58,1) 75%,rgba(10,39,58,1) 100%);
background-size: auto 200%;
background-position: 0% 0%;
transition: none;
}
.glasses.left {
left: 40.2%;
}
.glasses.right {
right: 40.2%;
}
.glasses :hover {
.glasses {
transition: background-position 0.2s;
background-position: 0% -200%;
}
}