owlCarousel 和某些浏览器上的复杂边界半径问题答案

【问题标题】：Problem with complex border-radius on owlCarousel and some browsersowlCarousel 和某些浏览器上的复杂边界半径问题
【发布时间】：2021-01-07 21:49:00
【问题描述】：

因此，在这种情况下，根据设计，我需要做一些具有凹面或凸面的元素，由复杂的border-radius 实现。现在，因为border-radius 最终创建了元素的椭圆或半个椭圆，以实现最终的外观，看起来像这样......

...我必须创建一个更宽的容器来容纳整个圆角元素，但只显示其中的一部分。

我基本上做的是有一个带有overflow: hidden (#main-slider) 的主容器，我在其中创建了一个具有width: 130%; 的元素(#main-slider-holder)，并且向左移动了15% margin-left: -15% 以及有border-radius 类.bottomcucurve。它还有padding: 0 15%;，这样它的子元素就可以在里面居中了。

最后我在里面有#slider 元素，这就是内容所在的地方。幻灯片有一个特定的高度，它们决定了滑块的高度。

一切正常，除了我在 iPhone（Safari 和 Chrome）或 Mac Safari 上打开它时。 Mac Firefox 和 Chrome 可以正常工作，但 Safari 不能。

问题在于它基本上确实在静态元素上显示了复杂的边框半径，但特别是在 owlCarousel 实例的元素上，它只是决定忽略它和父容器的overflow: hidden，只显示完整的元素。

基本上是这样的：

您可以看到下面的弯曲部分，但幻灯片的内容没有得到应有的剪辑。

我的结构如下。你可以在here看到它。

#main-slider {
    position: relative;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    overflow: hidden;
    z-index: 4;
}

#main-slider-holder {
    height: 100%;
    background: #248942;
    width: 130%;
    margin-left: -15%;
    padding: 0 15%;
    overflow: hidden;
}

#main-slider .slide {
    height: 17.5rem;
}

.bottomcurve {
    border-bottom-left-radius: 59.5% 8.75rem;
    border-bottom-right-radius: 59.5% 8.75rem;
}

<div id="main-slider">
    <div id="main-slider-holder" class="bottomcurve">
        <div id="slider">
            <div class="slide">Slide 1</div>
            <div class="slide">Slide 2</div>
            <div class="slide">Slide 3</div>
        </div>
    </div>
</div>

我在这里缺少什么吗？我应该如何解决这个问题？

【问题讨论】：

标签： html css safari mobile-safari owl-carousel

【解决方案1】：

这些链接可能会帮助您解决：

https://forum.webflow.com/t/overflow-hidden-round-corners-not-working-on-safari/67805

https://forum.webflow.com/t/safari-not-hiding-overflow-on-rounded-corner-divs/55060

【讨论】：

我认为您没有彻底阅读我的问题，这可行，发生的问题与溢出或 z-index 有关。另外，您应该阅读此developer.mozilla.org/en-US/docs/Web/CSS/border-radius
你要实现的东西不能用边框半径实现
也许这可以帮助你：stackoverflow.com/questions/17202128/…
正如我在问题中所说，有问题的边界半径适用于没有 owlCarousel 的元素。它仅在 owlCarousel 内的元素上失败。失败的不是边界半径，因为父元素仍然有它。
这是因为 owl carousel css 覆盖了其他 css 文件，这意味着您必须优先考虑您的代码而不是 owl carousel。尝试更改具有所需值的边框半径的 owl coraousel 文件。你明白我想说的吗？当您添加一个库（例如引导程序）时，浏览器可能会优先考虑该库而不是您的代码。因此它会忽略您的边框半径值并使用 owl carousel 边框半径值。

【解决方案2】：

将以下内容添加到#main-slider css：

overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

*感谢@Mahdyar 在上面的论坛帖子中找到解决方案

【讨论】：