Границы исчезают в Chrome, когда я увеличиваю масштаб

У меня есть эта очень простая форма: http://jsfiddle.net/TKb6M/91/. Иногда, когда я увеличиваю или уменьшаю масштаб с помощью Chrome, границы ввода исчезают. Например, когда я увеличиваю до 90%, я получаю:

Естественно, ваш пробег может отличаться.

Если вам интересны эти теги <span>, я добавил их в соответствии с рекомендацией в разделе Как сделать, чтобы элемент ввода занимал все оставшееся горизонтальное пространство? ,

Есть ли проблема с моим CSS или это ошибка Chrome? Кажется, работает нормально на Firefox. Что я могу сделать, чтобы избежать такого поведения?

Благодарю.

Ответ 1

Вы заставляете Chrome вычислять субпиксели, и это обычно имеет странное поведение.

Если вы измените высоту ввода на 30px, то увеличение на 90% будет работать нормально (потому что это 27px), но увеличение на 75% - нет (потому что это 22.50 px).

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

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

Ответ 2

Я почти уверен, что Луис Пуреза решил его проблему, но я нашел очень простой способ решить ее, изменив только это:

Если у вас есть граница таблицы, как эта:

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

Измените это на это:

INPUT,TEXTAREA {
border-top: thin solid #aaa
}

Я нашел это решение по этой ссылке: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

Я надеюсь, что это помогает

Ответ 3

Это потому, что вы устанавливаете фиксированную высоту, а при масштабировании ввода увеличивается больше этой высоты, что приводит к исчезновению границы. Используйте высоту линии и отступы, чтобы получить желаемую высоту вместо этого - см. обновленный скрипт

Обновление: Игнорируйте то, что я сказал, потому что вы устанавливаете overflow:hidden на свой диапазон, удаление которого должно выполнить трюк. Возможно, потребуется изменить ширину ввода.

На боковой ноте; вы делаете свой диапазон блочным элементом, который хорош и работает, но он выглядит немного плохо. Попробуйте использовать элементы блока, например a, вместо изменения встроенного элемента в блок, если это возможно.

Ответ 4

Я знаю, что опаздываю в игре, но немного выдумал и установил ширину границы в 1.5px, кажется, каждый раз помогает.

Ответ 5

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

Например: Ширина не была правильной в моем случае только для IE, поэтому я упомянул:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}

И проблема увеличения/уменьшения масштаба происходила в firefox и chrome, поэтому я упомянул

.spanStyles {
 display : flex;
}

это разрешило мою проблему во всех браузерах.

Ответ 6

У меня была похожая проблема с хромом в 2018 году - отсутствовала верхняя граница для входных данных и текстовых полей. Исправлено было указать верхнюю границу в CSS просто как

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

Я не могу объяснить, почему это было необходимо, и это только потеряло границы в определенных местах, но по крайней мере это был быстрый обходной путь.

Ответ 7

У меня была такая же проблема с div упаковывающим input, и все замечательные ответы здесь не помогли мне, наконец, добавив:

overflow: auto;

с элементом div (с проблемной границей) все получилось.