So vermeiden Sie Überlauf-x-Problem mit Subpixeln in Chrome

Ich habe ein Container-Div, das relativ ist, und hat Überlauf-X: Auto. Ein inneres div ist absolut positioniert und hat eine Breite von 33.3333% (ein Drittel). Dieses innere div gleitet mit Animationen und so für die Anwendung durch den Übergang der transform: translate3d() Eigenschaft. Das Problem ist, dass, wenn ich möchte, dass das innere div im letzten Drittel (translate3d auf 200%, 0,0 gesetzt) des übergeordneten Containers ist, löst es die Überlaufeigenschaft aus. Ich glaube, dass dies nur in Chrome passiert (aber möglicherweise auch Safari).So vermeiden Sie Überlauf-x-Problem mit Subpixeln in Chrome

HTML

Creates a scroll bar because of subpixels 
<div class="test1"> 
    <div class="test2"></div> 
</div> 

Adjusting it slightly shows this to be the case 
<div class="test1"> 
    <div class="test2 adjustment"></div> 
</div>

CSS

.test1 { 
    width: 491px; 
    background: lightblue; 
    height: 30px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    position: relative; 
} 

.test2 { 
    width: 33.3333%; 
    height: 15px; 
    background: purple; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transform: translate3d(200%,0,0); 
} 

.adjustment { 
    transform: translate3d(199%,0,0); 
}

Fiddle https://jsfiddle.net/fcyx2aou/

Alle Ideen, wie um dieses Problem zu bekommen? (und die Einstellung, die ich gemacht habe, indem ich zu 199% gehe, wird nicht funktionieren, weil dieser kleine Lückenversatz schließlich in einigen meiner Anwendungsfälle sichtbar sein wird)

Quelle

2016-04-28 mls3590712

Ich möchte Ihnen wirklich helfen, könnten Sie mit einem Bild oder etwas illustrieren, das uns hilft, ein bisschen mehr zu verstehen, was Sie versuchen zu bekommen? Es gab eine Zeit, die ich hatte das gleiche Problem mit den Eigenschaften translate3d, Höhe und Überlauf. –

@CarlosBensant War die jfiddle Verbindung nicht genug? Ich habe dies als ein Beispiel erstellt, das leicht visuell zu sehen ist. Grundsätzlich, wenn ich einen Behälter habe und dann ein Element darin habe, das ein Bruchteil seiner Breite sein sollte (Ich habe in diesem Beispiel 1/3 gewählt, aber in meiner Anwendung ist es variabel und könnte 1/4, 1/5, 1 sein/6 usw. der übergeordneten Containergröße.) Ich versuche dann, dieses innere div mit translate3d in die verschiedenen Größen zu bewegen. Wenn ich also ein 1/3 großes inneres div-Element habe, würde es um X 0%, 100% bzw. 200% verschoben werden. Der 200% erzeugt einen Überlauf im Elternteil. – mls3590712

Sie können die Breite der gesamten Bildlauffeldbreite einstellen: 492px; oder 490px; in .test1.

dh:

.test1 { 
    width: 490px; /*or 492*/ 
    background: lightblue; 
    height: 30px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    position: relative; 
}

Ich bin nicht sicher, warum dies den Fehler verursachen würde oder wenn dieses Update für Sie funktioniert, aber es kann nur tun müssen, damit nicht vollkommen gleichmäßig zu teilen und „Aufrunden“ Sie geben eine X-Overflow-Bildlaufleiste.

Quelle

2016-04-29 00:33:30

Ich wählte tatsächlich 491px, um das Problem zu demonstrieren. Ich bin mir bewusst, dass das Problem verschwindet, wenn die Gesamtbreite des Containers gleichmäßiger teilbar ist. In der tatsächlichen Anwendung wird die Breite einfach auf 100% gesetzt, so dass sie flüssig ist, was bedeutet, dass sie auf allen Bildschirm-/Browserfenstergrößen arbeiten muss. – mls3590712

So vermeiden Sie Überlauf-x-Problem mit Subpixeln in Chrome

Antwort

Verwandte Themen