"Overflow: hidden" doesn't hide children on Iphone

Question

I've created a div-circle in which I want to hold (1) an image and (2) three div-waves (see image). My solution is working on desktop with Chrome, Firefox, Microsoft Edge, Internet Explorer. However, on my iPhone, the overflow doesn't work at all, either in safari or chrome. Here's an image of the difference in result. The relevant HTML looks like this:

<div class="circleContainer">
    <div class="wavesContainer">
        <div class="wave1" />
        <div class="wave1" />
        <div class="wave1" />
    </div>

    <img />
</div>

And the relevant CSS code looks like this:

.circleContainer {
    border-radius: 300px;
    height: 200px;
    width: 200px;
    background-color: #232323;
    overflow: hidden;
    position: relative;
    border: #404040 solid 4px;
    background-image: URL("pathToBackgroundImage");
    background-size: 300px;
    background-position: -20px;
    transition: .5s;
    opacity: 1;
}

.wavesContainer {
    transition: .5s;
    opacity: 1;
}

.wave1,
.wave2,
.wave3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400px;
}

.circleContainer img {
    height: 220px;
    top: 28px;
    left: 18px;
    opacity: 1;
    transition: .5s;
    position: absolute;
}

NOTE: The HTML and CSS are simplified, but I think the code above is all that is necessary to solve this issue.

Here is the code if you want to see it for your self: https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/

I am pretty experienced with CSS and still nothing I've tried work, so you guys are my last hope. I appreciate all the help I can get!

score 0 · Accepted Answer · answered Mar 12 '21 at 18:06

I solved this with a rather brute-force solution. Namely to create a rectangular shape (the red one in this image) with a transparent circle cut, as seen in this thread. I could then hard code some of the z-indices such that the rectangle only hides what I want it to. I also added a new circle with a border (the green one in this image) so I could keep the border around the circle.

It wasn't the solution I was hoping for, but it fully solved my problem!

"Overflow: hidden" doesn't hide children on Iphone

1 Answers1