Почему при transform: translate(-50%, -50%) блока, в этом блоке пикселя размывает?

Question

[an]

Имеется модальное окно

.popup{
        position: absolute;
	width: 300px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

внутри блока имеется форма с инпутами
так вот
даю border 1px solid black инпутам
то граница размыта становится
если убрать transform: translate(-50%, -50%); все ок

Comments

[an]

TheAndrey7, для центрирования
что бы не использовать обратный марджин

[an]

TheAndrey7, это уже лишний контейнер нужен

[profesor08]

Андрей, опиши задачу и тогда помогут. Из вопроса можно понять лишь то, что есть факт непонимания того, как делать простейшие вещи.

[an]

profesor08, так а что собственно тут описать
есть блок, который появляется при клике (модальное окно)
он спозиционирован абсолютно 50% 50%
добавил transform translate -50% -50%
что бы он центрировался по X,Y по центру
в этом блоке есть форма с полями
но
в этом блоке при применениее transform плывут пикселя у полей
как видно на скриншоте верхний и нижний бордер поплыл
если убрать transform, то с пикселями все ок
вот разница

[profesor08]

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

[Антон Литвиненко]

Такова особенность этого приёма. И ни один фикс из интернета в итоге не сработал

[Pavel-ww]

Андрей, у модалки же наверняка есть overlay? Используй его как родительский контейнер для модалки. Именно ему задавай position fixed и т.д. А саму модалку выровняй флексом вместо transform translate. Это стандартный прием для таких вещей, transform translate - это костыль в данном случае

Answer 1

[iBird Rose]

никак это не поправить. это особенность выравнивания через transform: translate
его вообще не нужно использовать на областях, где пользователь должен взаимодействовать с элементами. максимум мелкие вещи повыравнивать.
в твоем случае переделай модалку так, чтобы через absolute или fixed на весь экран был родитель. а внутри него модалка центрировалась через flex, к примеру:

.popup-wr {
	display: flex;
	align-items: center;
	justify-content: center;
}

Comments

[Ankhena]

На случай, если модалка не поместится в окно, то лучше получится гридами, а не флексами.