Что за проблемы с наложением, бордерами в хроме в последнее время?
Я один сталкиваюсь с такими "багами" в последнее время?Есть ли какие то известные проблемы на этот счет?Или я в чем то не прав?
Верстка дефолтная, вот стили если интересно:
spoiler
.services { position: relative; &__item { @include media(md) { position: relative; z-index: auto; top: auto; height: auto; margin-bottom: 16px; padding-bottom: calc(300px / 328px * 100%); &:last-child { margin: 0; } } overflow: hidden; width: 100%; padding-bottom: calc(500px / 1290px * 100%); background: white; border-radius: 32px; &:nth-child(1) { position: absolute; z-index: 2; top: calc(var(--spacing) * -1); margin-top: var(--spacing); } &:nth-child(2) { color: var(--headline); } } &__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } &__image { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; img { width: 100%; height: 100%; object-fit: cover; } } &__content { @include media(md) { padding: 20px 16px; } position: absolute; z-index: 1; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 30px 110px 30px 30px; } &__title { @include media(md) { font-size: 24px; } margin-bottom: 20px; font-size: 36px; line-height: 120%; letter-spacing: -0.02em; } &__desc { @include media(md) { display: none; } max-width: 410px; line-height: 150%; } &__btn { align-self: flex-start; } &__left { display: flex; flex-direction: column; } } |
.services { position: relative; &__item { @include media(md) { position: relative; z-index: auto; top: auto; height: auto; margin-bottom: 16px; padding-bottom: calc(300px / 328px * 100%); &:last-child { margin: 0; } } overflow: hidden; width: 100%; padding-bottom: calc(500px / 1290px * 100%); background: white; border-radius: 32px; &:nth-child(1) { position: absolute; z-index: 2; top: calc(var(--spacing) * -1); margin-top: var(--spacing); } &:nth-child(2) { color: var(--headline); } } &__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } &__image { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; img { width: 100%; height: 100%; object-fit: cover; } } &__content { @include media(md) { padding: 20px 16px; } position: absolute; z-index: 1; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 30px 110px 30px 30px; } &__title { @include media(md) { font-size: 24px; } margin-bottom: 20px; font-size: 36px; line-height: 120%; letter-spacing: -0.02em; } &__desc { @include media(md) { display: none; } max-width: 410px; line-height: 150%; } &__btn { align-self: flex-start; } &__left { display: flex; flex-direction: column; } }
И таких моментов много (Какие то ошибки с рендером или чем то еще) и все только в хроме, в фаерфоксе этой проблемы нет.
EDiT.
Эта белая полоса не из под следующего блока а из-за цвета самой карточка поверх которой лежит эта картинка.
Дополнительно:
Этот "баг" - проблемы округления размеров элементов до целого количества пикселей. Разработчики хрома всегда имели с этим сложности. Если погуглить - у них там кучи обсуждений открыты на тему того, что размеры в разных браузерах считаются как-то слишком по-разному, и логика размеров в хроме оставляет желать лучшего. В последние месяцы и правда стало даже хуже, чем было раньше. Проблема с вот этими отступами стала появляться в старом коде, который раньше работал нормально.
В большинстве случаев это решается размерами и расположением элементов в духе calc(100% + 0.5px). В зависимости от логики в дизайне значения меняются, но логика остается - добавляем к значениям в коде доли пикселя до тех пор, пока не начнет округляться нормально. Иногда, если там картинка, помогает font-size: 0 для контейнера картинки. Все это лютые костыли, и так оно не должно работать, но более толкового решения пока не наблюдается. Это баг браузера, который мы не контролируем.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблемы с наложением и бордерами в Google Chrome могут возникать из-за различных факторов, таких как изменения в CSS стилях, обновления браузера или конфликты с расширениями. Вот несколько шагов, которые могут помочь в решении данной проблемы:
1. Проверьте CSS стили: убедитесь, что все стили правильно применены к элементам на странице. Возможно, есть ошибки в CSS коде, которые приводят к неправильному отображению элементов.
2. Проверьте обновления браузера: иногда проблемы с отображением могут возникать из-за багов в самом браузере. Убедитесь, что у вас установлена последняя версия Google Chrome.
3. Отключите расширения: некоторые расширения могут влиять на отображение веб-страниц. Попробуйте временно отключить все расширения и проверить, помогло ли это.
4. Используйте инструменты разработчика: откройте инструменты разработчика в браузере (нажмите F12), чтобы проверить стили элементов и их наложение. Это поможет вам выявить возможные проблемы с CSS.
5. Попробуйте очистить кеш и cookies: иногда проблемы с отображением могут быть связаны с кешированием данных. Попробуйте очистить кеш и cookies браузера и перезагрузить страницу.
Вот пример кода на PHP для создания элемента с бордером:
<div style="border: 1px solid black;padding: 10px"> <p>This is a div element with a border.</p> </div>
Надеюсь, эти рекомендации помогут вам решить проблему с наложением и бордерами в Google Chrome. Если проблема сохраняется, пожалуйста, уточните дополнительные детали, чтобы мы могли предоставить более точное решение.