Chrome Bildlaufleiste überlappende div Grenze von 1 Pixel

In Chrome 33.0.1750.146 m, wenn ein div mit einem 1-Pixel-Rahmen und eine Bildlaufleiste Bruchteil Pixel Breite (wo der Bruchteil ist> = 0,5) innerhalb eines anderen div mit einem Prozentsatz Breite (< 100%), die rechte Seite der Umrandung ist manchmal verdeckt, je nach Rundung. Dies scheint zu geschehen, weil die Position der Bildlaufleiste und die rechte Seite der div-Datei in verschiedene Richtungen gerundet sind, wodurch die Bildlaufleiste die rechte Seite des div um ein Pixel überlappt.Chrome Bildlaufleiste überlappende div Grenze von 1 Pixel

Ist dies ein bekannter Fehler oder gibt es einen Workaround? Ich erlebe diesen grafischen Fehler in einer PhpBB Template-Seite, wo der Inhalt zentriert ist und die Breiten automatisch berechnet werden, was zu einem --- .5px Width div geführt hat, und ich habe es auf das folgende minimal reproduzierbare Beispiel zurückgeführt:

HTML:

<div id="wrapper"> 
    <div class="box"> 
     <p>Test content</p> 
     <p>Test content</p> 
     <p>Test content</p> 
     <p>Test content</p> 
    </div> 
</div>

CSS:

.box { 
    height: 100px; 
    overflow: auto; 
    border: 1px solid; 
} 

#wrapper { 
    max-width: 75%; 
    margin: auto; 
}

Beispiel JSFiddle — Größe ändern Sie das Fenster und beobachten Sie die rechte Grenze flackern/erscheinen/verschwinden.

Quelle

2014-03-04 Jordan Trudgett

Interessant. Das Verschwinden der rechten Grenze scheint nur dann der Fall zu sein, wenn der '# wrapper' eine berechnete Breite von' xxx.5px' oder 'xxx.75px' hat. Nach meiner Erfahrung sind Subpixel immer etwas fehlerhaft (unterschiedliche Ergebnisse bei verschiedenen Browsern/Versionen). Keine Möglichkeit, die berechnete Breite in der Vorlage zu runden? – MysticEarth

Es ist nicht viel besser, wie Sie die Bildlaufleiste glänzen sehen können, aber "Umriss" verwenden könnte? [** DEMO **] (http://jsfiddle.net/Ruddy/zHh4c/2/) – Ruddy

@Ruddy Viel besser schon - wäre eine akzeptable Lösung für meine Benutzeroberfläche. Ich bemerkte, dass meine Umrandung in meinem Chrome in Originalgröße nicht sichtbar war, wusste aber nicht, dass es mit der Fenstergröße zu tun hatte. –

EDIT: Wie von Rohrbs unten gezeigt, scheint meine ursprüngliche Antwort nicht zu funktionieren! Eine mögliche Lösung scheint darin zu bestehen, den Rahmen vollständig zu entfernen und box-shadow: 0 0 0 1px #000; hinzuzufügen. Abhängig von den Anforderungen Ihres Browsers könnte dies helfen, das zu erreichen, was Sie benötigen.

~~Ersetzen margin: auto; mit padding: 0 12.5%; auf #wrapper scheint dies zu beheben. Ich bin mir nicht sicher, wie wichtig es ist, diesen Rand automatisch für Ihren speziellen Fall zu verwenden.~~

~~http://jsfiddle.net/zHh4c/7/~~

Quelle

2014-06-08 21:35:47 Brittliff

Nein. Die Überlappung tritt immer noch auf, wenn das Fenster verkleinert wird. :( – Rohrbs

Ich bin sicher, dass dies an einem Punkt funktionierte, aber da es so lange her war, habe ich mich vielleicht irrt. Eine einfache Lösung scheint die Grenze vollständig zu entfernen und 'box-shadow: 0 hinzuzufügen 0 0 1px # 000; '. Abhängig von der Browser-Unterstützung könnte dies helfen zu erreichen, was Sie brauchen. – Brittliff

Box Schatten funktioniert für mich. Ich endete mit" Gliederung "wie in diesem Kommentar vorgeschlagen: http://StackOverflow.com/Questions/ 22167438/chrome-scrollbar-überlappende-div-border-by-1-pixel # comment33645604_22167438 es ist außerhalb der Grenze, aber ist ausreichend für meine Zwecke – Rohrbs

hatte ich ähnliches Problem. Ich hatte Div mit Scrollbar und Rand rechts auf 2px eingestellt und wenn ich die Größe des Fensters skaliert hatte ich die Bildlaufleiste oder nicht im Ergebnis hatte ich 1px Rand, wenn Bildlaufleiste eingeschaltet war und 2px wenn nicht.

Ich habe es behoben durch Hinzufügen 3px Grenze und Einstellung:

overflow-y: scroll;

so die Scrollbar immer sichtbar ist und die Grenze hat immer 2px sichtbare Breite.

Quelle

2017-07-05 10:21:27 jcubic

Chrome Bildlaufleiste überlappende div Grenze von 1 Pixel

Antwort

Verwandte Themen