2015-04-09 3 views
8

Mein Ziel ist es, ein scrollbares Bootstrap-Modal zu bekommen, das größer ist als mein Bildschirm.Bootstrap modal stop Scrollen auf Chrome 41 mit Maus Scroll/Touchpad (funktioniert aber mit hoch/runter Tasten)

Problem: On Chrome 41 (aber nicht 40) auf Yosemite OS ausgeführt wird, meine Bootstrap modal Scrollen aufhören würde, nachdem es erscheint, wenn der Inhalt Höhe größer als der Bildschirm ist.

Was ich versucht habe, ist: - Gerade Bootstrap (v.3.3.1) fügt automatisch '.modal-open', um den Körper-Tag mit der Eigenschaft 'overflow: hidden;'. Dies bewirkt, dass das Modal scrollbar ist. - Ich habe die Witwengröße angepasst und nur durch Bewegen eines Pixels kann das Modal wieder gescrollt werden. - Ich habe versucht, Überlauf anzuwenden: sichtbar; und usw. sowohl zum Body-Tag als auch zum Modal selbst, aber kein Glück.

Weiß jemand, was dieses Problem ist? Ist es ein Bug, den Chrome 41 auf Yosemite eingeführt hat? Ich verwende momentan Bootstrap 3.3.1.

Aktualisiert Scrollen mit den Pfeiltasten auf/ab funktioniert gut, aber nicht mit Maus/Touchpad Scrollen.

+0

Ich bezweifle es ist O zusammen. Wahrscheinlich ein kleiner Unterschied zwischen der Interpretation von CSS 40 und 41. Kannst du deinen Code posten? – snowYetis

+0

@snowYetis Es passiert jedes Mal beim Bootstrap-Modus, wenn der Inhalt größer als der Bildschirm ist. Mein Code ist nur ein einfaches $ ('# selector'). Modal ('show') auf einem Button-Klick-Event. Es passiert nur auf Chrome 41. –

+0

Überprüfen Sie die modalen Bootstrap-Stile. Sehen Sie, wenn irgendwelche Überlauf enthalten: versteckt – snowYetis

Antwort

13

Ich habe das gleiche Problem. Nach der Schnellsuche habe ich festgestellt, dass jemand dies bereits auf their GitHub gemeldet hat und es gibt eine tatsächliche Korrektur, die vor ungefähr sechs Tagen vorgeschlagen wurde, aber es wurde noch nicht akzeptiert, was bedeutet, dass es momentan keine stabile Version ist.

Sie können die vorgeschlagenen fix in Ihrem CSS leicht anwenden:

.modal.in { 
    -webkit-transform: translateZ(0); 
      transform: translateZ(0); 
} 
+0

Das löste es für mich Linux - Chrome –

+0

Das funktionierte für mich auch unter Windows - Chrom 44.0.2403. Offenbar ist dies ein bekanntes Problem mit Chrome, das die Bootstrap-Entwickler aufgrund anderer Probleme mit translateZ nicht beheben können: https://github.com/twbs/bootstrap/issues/16297 –

0

Ich habe dieses Problem auch. Win7 Chrome 41 und 42beta & Linux Chrome 41. Meine temporäre Lösung: Ansichtsfenster Höhe + 1px auf Seite von js, um Bildlaufleiste jedes Mal aktiv zu haben.

+0

Ah ich verstehe. Gut zu wissen, dass es nicht nur mir passiert. Genial! Meine vorübergehende Lösung besteht darin, das cotent in das modal in einem div einzufügen und den Überlauf-y: scroll so einzustellen, dass es im Modal scrollbar ist. –

Verwandte Themen