CSS фоновых изображений полной ширины (отрицательное поле) в Safari - PullRequest
Новая
       42

CSS фоновых изображений полной ширины (отрицательное поле) в Safari

0 голосов
/ 12 января 2020

У меня проблема CSS, которую я не могу исправить.

У меня есть раздел полной ширины на моей странице WordPress. Он использует отрицательные поля для создания полной ширины (которая отлично работает в chrome, safari, edge и firefox). 

margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
max-width: 100vw;
width: auto;

Я добавил фоновое изображение с помощью: before и: after, чтобы создать некоторые волны: 

.waves:before {
content: '';
background-image: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg);
background-position: center top;
background-size: 100% 70px;
background-repeat: no-repeat;
height: 70px;
position: absolute;
top: -1px;
left: 0;
right: 0;
z-index: -1;
}

Отлично работает в firefox, chrome и на краю. Но Safari не хочет просматривать фоновое изображение во всю ширину, и на больших экранах оно выглядит ужасно. Я пробовал разные настройки, но не могу заставить его работать. У вас есть еще идеи? Я не хочу удалять этот эффект. : (

Вы можете просмотреть пример в реальном времени здесь: https://lettering.tools/ Раздел полной ширины находится сразу после первого текстового блока.

Спасибо!

РЕДАКТИРОВАТЬ: Я использовал комбинацию ответов для решения проблемы. Но что, если я не хочу отзывчивый рост SVG?

Также возникла другая проблема: нежелательная линия 1px в Edge. Я пытался отрицательные нижние значения и transform: translate. Но это не сработало. Наконец я понял, что переполнение: скрытый в контейнере вызывает эту строку в 1px - но почему?!

enter image description here

Ответы [ 2 ]

1 голос
/ 12 января 2020

Я бы предложил вам следующее CSS (см. Комментарии в коде): 

.no-sidebar .entry-content .alignfull
{
    margin: 0 calc(-50vw + 50%); /* simplify calculation, some browsers versions do not support division/multiplication */
    max-width: 100vw;
}

.waves:before, .waves:after /* you can combine selectors */
{
    content: '';
    background: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg) 0 / cover; /* you can combine background properties */
    height: 5.83vw; /* you want it responsive, right? */
    position: absolute;    
    left: 0;
    right: 0;    
    z-index: -1;
}

.waves:before {top: -1px}
.waves:after {bottom: -1px; transform: rotate(180deg)}
0 голосов
/ 12 января 2020

Измените .waves:before и .waves:after высоту на 100% и удалите 70px в background-size, например, так: 

.waves:before {
    content: '';
    background-image: url(//lettering.tools/wp-content/themes/ostrichtheme/img/waves.svg);
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: -1;
}

, тогда у вас, вероятно, будет содержимое внутри дальше от волн, поэтому добавьте там больше отступов

Примерно так: 

.waves .wp-block-group__inner-container {
    padding: 90px 0;
}

Выглядит одинаково как в Safari, так и в Chrome

...