2014-06-30 7 views
12

Grundlegendes Problem: das Einstecken einer externen Maus verursacht, dass sowohl Chrom als auch Firefox Scrollbalken zu einer Seite hinzufügen (die ich baute) in meinem Browser. Ich versuche herauszufinden, warum das so ist, aber ich habe Schwierigkeiten, Informationen zu finden. Wir haben das Problem unter OSX 10.7.5 und 10.8.5 getestet und reproduziert.Externes Maus-Plugin verursacht Browser-Rendering der Seite in Mac OS X?

Meine Theorie ist, dass, da beiden Browser auf diese Weise reagieren, die Abfolge der Ereignisse ist so etwas wie:

  1. Stecker in externer Maus.
  2. Das Betriebssystem erkennt die Maus und sendet eine Art von Ereignis an laufende Anwendungen.
  3. Die laufenden Anwendungen erhalten dieses Ereignis und ändern das Rendering der Seite.

Ich habe die berechneten Stile beider Zustände diffundiert, und es gibt keinen Unterschied, nur um es auszuschließen. Hier ist ein animiertes Gif von dem, was passiert. das einzige, was ich die Veränderung auslösen machte in einer externen Maus Aufstecken:

enter image description here

Meine Frage ist, welche Art von Ereignisse aus den OS an den Browser gesendet wird, wenn eine externe Maus angeschlossen ist und wie kann ich tiefer in das Geschehen dieser Veranstaltung eintauchen?

+2

Was zum ... Teufel ?! So etwas habe ich noch nie gesehen. Was für eine Art von Zauberei ist das? Könnten Sie auch eine Geige mit Markup und Styling veröffentlichen, die diese Bildlaufleiste erscheinen lässt?Ich denke, es hat etwas damit zu tun, dass der Standard-Stryling des Browsers mit der externen Maus von Handy zu Desktop wechselt. – OptimusCrime

+0

Wie lautet der Code Ihrer Website? Wenn Sie ein responsives Design haben, könnte die Idee von OptimusCrime Sinn machen. – wordsmythe

+0

unsere App ist ziemlich beteiligt, und ich habe es schwer gefunden, ein Beispiel zu extrahieren. Wir verwenden flexbox für reaktionsfähiges Layout. –

Antwort

15

Wenn ich Ihr Problem nicht völlig falsch verstehe, dann hat das nichts mit dem Browser zu tun, sondern ist eine Funktion von OS X, die Bildlaufleisten (in jedem unterstützten Programm) so lange zu verbergen, wie Sie eine verwenden Eingabegerät, das keine Bildlaufleisten benötigt (wie das Trackpad eines MacBook). Wenn dies der Fall ist, sollten die Bildlaufleisten auch in z.B. Finder mit der Maus eingesteckt.

dieses Verhalten zu ändern, gehen Sie zu System Preferences>General und wählen Always unter Show scroll bars.

+0

danke, das ist richtig. –

+2

Sie können auch 'Beim Scrollen 'wählen, um die Bildlaufleisten nicht anzuzeigen, selbst wenn die externe Maus eingesteckt ist. –

1

Für mich war das Problem, dass die Verwendung von VW-Einheiten nicht die Scrollbar-Breite berücksichtigen. Ändern unseres CSS, um% anstelle von vw zu verwenden, funktioniert (50% vs 50vw).

CanIUse.com sagt:

Aktuell alle Browser, aber Firefox 100vw falsch betrachten die gesamte Seitenbreite, einschließlich vertikale Bildlaufleiste, die eine horizontale Bildlaufleiste verursachen kann, wenn Überlauf: Auto gesetzt .

dieses codepen für den Nachweis See. http://codepen.io/anon/pen/ZGYNWZ versuchen Sie mit und ohne USB-Maus.

CSS:

:root, html { 
    overflow-x: auto; 
    overflow-y: scroll; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.thing { 
    width: 100vw; 
    height: 110vh; 
    background: blue; 
} 

HTML:

<div class="thing"> 

</div>