Как можно объяснить подобное поведение песевдо-элемента :after?

Question

[Андрей Юсупов]

Всем привет. Есть сайт - oazis.pro-dd.ru на нем есть список товаров, если переключить вид разположения товаров на список, то у товаров появляется разделительная нижняя линия, которая сверстана через псевпоэлемент :after. Вся разметка карточек и стилей идентична, но как можно увидеть, визуально какая-то из линий явно толще, а какая-то тоньше ( высота у них 1px ) Первый вопрос почему, как это возможно? Второй момент: псевдо-элемент :after имеет абсолютное позиционирование, и если я изменю его позицию по вертикали на 1 пиксель, то те полосы которые были толще, станут тоньше, а те что тоньше , наоборот. За счет чего это может происходить? Кто-нибудь объясните пожалуйста подобное поведение, буду крайне признателен.

Comments

[Ankhena]

Обычно такое происходит из-за масштаба в вашем браузере, когда он отличен от 100%.
Поставите 100% - всё будет хорошо.

[Андрей Юсупов]

но у меня масштаб 100%, как это можно объяснить в таком случае?

[Ankhena]

Никита Юсупов, просто замените на бордер для li

А ещё у вас кнопки внутри ссылки и другие ошибки валидации.

[RAX7]

Никита Юсупов, transform: translate к ним применяется?

[Андрей Юсупов]

RAX7, Спасибо за ответ. П, но проблему не решает

[Lynn «Кофеман»]

> но у меня масштаб 100%

А как вы тогда объясните что картинка которая должна быть шириной не более 446px на вашем скриншоте имеет ширину 557px?

Очень похоже на масштаб 125%, может быть средствами ОС, а не браузера

P.S. зайдите в chrome://settings (настройки) и поищите «zoom»

[Андрей Юсупов]

Спасибо за ответ. Все верно, в настройках операционной системы стоял рекомендованный масштаб 125%, изменив его на 100% полосы отображаются как надо. Спасибо что помогли разобраться. Напишите ваше сообщение в ответы, я помечу решением.

[Андрей Юсупов]

Lynn «Кофеман», Спасибо за ответ. Все верно, в настройках операционной системы стоял рекомендованный масштаб 125%, изменив его на 100% полосы отображаются как надо. Спасибо что помогли разобраться. Напишите ваше сообщение в ответы, я помечу решением.

Answer 1

[Lynn «Кофеман»]

Судя по тому, что картинка которая должна быть шириной не более 446px на вашем скриншоте имеет ширину 557px где-то выставлен масштаб 125%

Масштабирование может быть и на уровне операционной системы, так что надо посмотреть в настройках ОС.

Так же в хроме можно поменять дефолтный масштаб со 100% на другое значение. Это тоже строит проверить в настройках хрома (открыть chrome://settings и поискать слова zoom/масштаб)

Answer 2

[Юрий]

Попробуйте отключить box-shadow у псевдоэлемента ::before на этой же карточке. У него высота в процентах, получается дробная, и от тени кусок может торчать.

Comments

[Андрей Юсупов]

Спасибо за ответ, но ведь box-shadow у псевдоэлемента ::before стоит прозрачность 0 и он становится видимым только при наведении. Разве он может как-то мешать?

[Юрий]

Никита Юсупов, теоретически не должен, но мало ли )
Я у себя не могу воспроизвести вашу проблему ни в одном браузере. Вообще действительно похоже на кривое масштабирование, и даже если в браузере 100%, оно может быть включено где-то на уровне системы. Попробуйте там тоже перепроверить.

[Андрей Юсупов]

Юрий, Спасибо за ваш ответ, я обязательно проверю вашу теорию.