Обходной путь для сбоя перекрытия webkit - PullRequest
Новая
       31

Обходной путь для сбоя перекрытия webkit

5 голосов
/ 26 мая 2019

После работы над страницей в течение нескольких месяцев я заметил странное поведение в браузерах на основе webkit.Я реализовал элемент ввода с техникой, которую я спросил здесь Создание четырехугольника с определенной степенью Все отлично работает во всех браузерах, кроме webkit.

Я ищу это точное поведение и пытался найти существующие обходные пути.Пример для предложенного исправления: 

@supports (-webkit-overflow-scrolling: touch) {
    transform: translate3d(0, 0, 0);
}

Однако это не работает.

Я создал проект с глюками с проблемой: https://glitch.com/~safari-bug-overflow

Однако я также создал более простой пример: 

<div>
    <div class="wrapper">
        <div class="background"></div>
        <div class="content">
            <h1>
                Test
            </h1>
            <h1>
                Test
            </h1>
            <h1>
                Test
            </h1>
            <h1>Test</h1>
        </div>
    </div>
</div>
<style>
.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}
</style>

Так выглядит в большинстве браузеров.:

Chrome

Вот как это выглядит в браузерах на основе webkit

Safari

Теперь мне нужно найти решение этой проблемы, потому что я не ожидаю каких-либо исправлений в ближайшем будущем.Я даже не уверен, является ли это ошибкой в ​​webkit или ошибкой в ​​моем css.Я думаю, что это WebKit, потому что он работает в любом другом браузере.

Я нашел отчет об ошибке WebKit: https://bugs.webkit.org/show_bug.cgi?id=182520

Ответы [ 2 ]

0 голосов
/ 16 июня 2019

Я нашел решение сам. Однажды я подумал, что, возможно, webkit использует другую начальную позицию z. Затем я попытался отодвинуть div. И это сработало.

Вы можете сначала применить translateZ к вашему преобразованию, чтобы исправить ошибку: 

.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    -webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}

Обратите внимание на translateZ(-1000px) на -webkit-transform

0 голосов
/ 05 июня 2019

сначала, не используйте h1 для этих целей, с точки зрения поисковой оптимизации, которая была бы катастрофой. :)

Я думаю, что ваша проблема в классе контента. Пробовали min-height?

Код CSS 

.content {
    min-height:300px; /* for example */
}

В противном случае было бы полезно, если бы вы предоставили скрипку js или что-то еще:)

...