时间戳

首页 > 解决方案 > “溢出：隐藏”不会在 Iphone 上隐藏孩子

html - “溢出：隐藏”不会在 Iphone 上隐藏孩子

问题描述

我创建了一个 div-circle，我想在其中保存 (1) 一个图像和 (2) 三个 div-waves（参见图像）。我的解决方案是在桌面上使用 Chrome、Firefox、Microsoft Edge、Internet Explorer。但是，在我的 iPhone 上，无论是在 safari 还是 chrome 中，溢出都不起作用。这是 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 非常有经验，但我仍然没有尝试过任何工作，所以你们是我最后的希望。我很感激我能得到的所有帮助！

标签： htmlcsscss-positionoverflow

解决方案

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

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

推荐阅读