Проблема со сложным border-radius в owlCarousel и некоторых браузерах - PullRequest
Новая
       166

Проблема со сложным border-radius в owlCarousel и некоторых браузерах

0 голосов
/ 14 июля 2020

Итак, в этом случае, по замыслу, я должен был сделать некоторые элементы, которые имели либо вогнутую, либо выпуклую сторону, что достигается сложным border-radius. Теперь, поскольку border-radius в итоге создает эллипс элемента или половину эллипса, чтобы добиться окончательного вида, который выглядит так ...

Image example

... I had to create a wider container which houses the whole radiused element, but only shows a part of it.

What I basically do is have a main container with overflow: hidden (#main-slider) in which I create an element (#main-slider-holder) that has width: 130%; and is moved 15% to the left margin-left: -15% and also has the border-radius class .bottomcucurve. It also has padding: 0 15%; so that its child element can be centered inside.

In the end I have the #slider element inside and that's where the content is. The slides have a specific height and they determine the slider's height.

Everything works fine, except for when I open it on an iPhone (Safari and Chrome) or on a Mac Safari. Mac Firefox and Chrome work fine, but Safari doesn't.

The issue is that basically it does show the complex border-radius on static elements, but specifically on elements of owlCarousel instances, it just decides to ignore it and the overflow: hidden of the parent container and just shows the complete elements.

Basically this happens:

Second image example

You can see the curved part below, but the content of the slide doesn't get clipped as it should.

The structure I have is the following. You can see it in action здесь . 

#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>

Что-то мне здесь не хватает? Как мне это исправить?

1 Ответ

0 голосов
/ 15 июля 2020
...