“溢出：隐藏”不会在 Iphone 上隐藏孩子答案

【问题标题】："Overflow: hidden" doesn't hide children on Iphone“溢出：隐藏”不会在 Iphone 上隐藏孩子
【发布时间】：2021-06-10 15:04:09
【问题描述】：

我创建了一个 div-circle，我想在其中保存 (1) 一个图像和 (2) 三个 div-waves（请参阅image）。我的解决方案是在桌面上使用 Chrome、Firefox、Microsoft Edge、Internet Explorer。但是，在我的 iPhone 上，无论是在 safari 还是在 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，这是现场演示：https://rudling-tech.web.app/

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

【问题讨论】：

标签： html css css-position overflow

【解决方案1】：

我用一个相当蛮力的解决方案解决了这个问题。即创建一个带有透明圆形切割的矩形（this image 中的红色），如this 线程中所示。然后我可以对一些 z 索引进行硬编码，这样矩形只会隐藏我想要的内容。我还添加了一个带边框的新圆圈（this image 中的绿色圆圈），这样我就可以保持圆圈周围的边框。

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

【讨论】：