"Overflow: hidden" 没有在 Iphone 上隐藏 children

Question

我创建了一个 div-circle，我想在其中保存 (1) 一张图像和 (2) 三张 div-waves（参见 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。相关的 HTML 看起来像这样：

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

    <img />
</div>

相关的 CSS 代码如下所示：

.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;
}

注意： HTML 和 CSS 被简化了，但我认为上面的代码是解决这个问题所必需的。

如果您想亲自查看代码，请使用以下代码：https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/

我对 CSS 非常有经验，但我仍然没有尝试工作，所以你们是我最后的希望。我很感激我能得到的所有帮助！

Answer 1

我用蛮力解决了这个问题。即创建一个矩形（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 中的红色那个），这样我就可以保留圆圈周围的边框。

这不是我希望的解决方案，但它完全解决了我的问题！

"Overflow: hidden" 没有在 Iphone 上隐藏 children

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

html

css

css-position

overflow