My meter is supposed to have this shape: Correct Bar
But on iOS Safari, it looks like this
It appears that the overflow: hidden property of the meter box is not functioning properly on iOS Safari.
The issue lies with a meter bar inside a meter box with overflow set to hidden and enclosed within a meter container.
This is my current code
.meter-container {
display: flex;
align-items: center;
margin-left: auto;
width: 80%;
height: 30%;
margin-bottom: 1%;
margin-right: 0;
}
.meter {
margin-left: auto;
overflow: hidden;
width: 70%;
height: 100%;
border: 1px solid rgb(241, 241, 241);
background-color: rgb(224, 224, 224);
border-radius: 25px 0px 25px 0px;
}
.meter-bar {
margin-top: -1px;
margin-left: -1px;
height: 100%;
background-color: teal;
border-radius: 0px 0px 25px 0px;
}