Grenzen verschwinden in Chrome, wenn ich zoome

Question

Ich habe diese wirklich einfache Form: http://jsfiddle.net/TKb6M/91/. Manchmal, wenn ich mit Chrome ein- oder auszoomen, verschwinden die Eingabegrenzen. Zum Beispiel, wenn ich zu 90% vergrößern, die ich erhalten:

natürlich die Leistung kann variieren.

Wenn Sie sich wundern über diese <span> Tags, fügte ich sie nach der Empfehlung an How do I make an input element occupy all remaining horizontal space?.

Gibt es ein Problem mit meinem CSS oder ist das ein Chrome-Bug? Es scheint auf Firefox gut zu funktionieren. Was kann ich tun, um dieses Verhalten zu vermeiden?

Danke.

Answer 1

Sie erzwingen Chrome Sub-Pixel-Berechnung, und das hat normalerweise seltsame Verhaltensweisen.

Wenn Sie die Höhe der Eingabe in 30px ändern, dann funktioniert ein 90% Zoom in Ordnung (weil dies 27px ist), aber ein Zoom von 75% nicht (weil das 22,50 px ist).

Sie können dies auch vermeiden, indem Sie dem Rahmen eine Breite von 3 Pixeln geben. In diesem Fall sehen Sie, dass die Rahmenbreite an verschiedenen Stellen unterschiedlich ist.

Wie auch immer, die beste Lösung besteht darin, den Eingängen mehr Platz zu geben, damit der Rand sauber gezeichnet werden kann, auch wenn er sich in einer Subpixelposition befindet.

Answer 2

Es ist, weil Ihre Einstellung eine feste Höhe und beim Zoomen der Eingabe wird größer als diese Höhe, so dass der Rand verschwinden. Verwenden line-height und padding die gewünschte Höhe statt zu bekommen - updated Fiddle

-Update finden Sie unter: ignorieren, was ich sagte, es ist, weil Sie overflow:hidden auf Ihrer Spanne sind einstellen, entfernen das sollte den Trick tun. Dies kann jedoch dazu führen, dass die Breite der Eingabe geändert werden muss.

Auf einer Seitennotiz; Du machst deine Spanne zu einem Blockelement, das in Ordnung ist und funktioniert, aber es sieht ein bisschen schlecht aus. Versuchen Sie, Blockelemente wie z. B. a zu verwenden, anstatt ein Inline-Element zu einem Block zu ändern.

Answer 3

Falls Überlauf: Versteckt ist notwendig, Erwähnen Sie Überlauf: Nur für den Browser ausgeblendet, der dem Breite-Problem gegenübersteht. In einem anderen Browser, metion display: flex, so dass die Breite automatisch korrekt und auch, so dass beim Vergrößern/Verkleinern der Grenzen nicht verschwinden.

Zum Beispiel: Breite war für IE nicht richtig nur in meinem Fall, so dass ich erwähnt:

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

Und das Zoomen in/out Problem wurde in Firefox und Chrome auftreten, so erwähnte ich

.spanStyles { 
display : flex; 
} 

Dies löste mein Problem in allen Browsern.