Почему в хром между родительским и псевдоэлементом появляется полоска?

backgroung элемента выходит за границу контейнера. Поэтому решил сделать псевдоэлемент и разместить в нем часть background, но в chrome при открытии инструмента для просмотра сайта в различных разрешениях между ними появляется полоска. Как это поправить ?

.footer-section__container {
    padding: 69px 135px 82px;
    display: flex;
    background: url(../img/footer-oval-img.png) no-repeat -70% 75%;
    position: relative;
    border: none;
}

.footer-section__container:before {
    content: "";
    position: absolute;
    background: url(../img/footer-oval-img.png) no-repeat 4px 75%;
    height: 100%;
    width: 332px;
    top: 0;
    left: -332px;
}


5c3da010d240f415575202.png
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
1. проверьте, стоит ли у вас в браузере масштаб 100% (если нет, то установите на 100%)
2. проверьте, используете ли вы свойства трансформации css (даже у родительских элементов) - имеется в виду transform: ... (если да, то пробуйте обойтись без них)
3. проверьте изображения, может быть они так "нарезаны", что по краям появились полосы. (если полосы есть, то обрежьте картинки заново)
4. проверьте, используются ли изображения в 100% масштабе. Судя по css, который вы привели в качестве примера, вы используете относительное расположение бэкграундных картинок (75%). Проверьте, какое число получается в вычесленных стилях (computed styles), если дробное - то, вполне возможно, эти доли пикселя и создают такое чудо.
...если ничто из вышеперечисленного вас не касается, то...
4. у хрома достаточно кондовый графический движок: он съедает пиксели у мелких svg-иконок, округляет дробные значения, и т.д. Всё ради быстроты отрисовки - поэтому некоторые и называют хром самым быстрым браузером (новый firefox объективно быстрее). Но когда-то благодаря такому подходу хром и получил большую популярность (еще благодаря беспощадному маркетингу google). Пробуйте отказаться от текущего подхода, смотрите в сторону использования не растровых картинок, в svg, или банально блоков с css трансформациями.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы