2014-06-30 8 views
12

Problema di base: collegare un mouse esterno fa sì che sia chrome che firefox aggiungano barre di scorrimento a una pagina (che ho creato) nel mio browser. Sto cercando di capire perché è così, ma ho difficoltà a trovare informazioni. Abbiamo testato e riprodotto il problema su OSX 10.7.5 e 10.8.5.Plugin esterno del mouse che causa il re-rendering del browser della pagina in Mac OS X?

mia teoria è che dal momento che entrambi i browser stanno rispondendo in questo modo, la sequenza degli eventi è qualcosa di simile:

  1. spina nel mouse esterno.
  2. Il sistema operativo riconosce il mouse e invia una sorta di evento alle applicazioni in esecuzione.
  3. Le applicazioni in esecuzione ricevono questo evento e modificano il rendering della pagina.

Ho differito gli stili calcolati di entrambi gli stati, e non c'è differenza, solo per escluderlo. Ecco una gif animata di cosa sta succedendo. l'unica cosa che sto facendo per innescare il cambiamento è collegare in un mouse esterno:

enter image description here

La mia domanda è, quale tipo di evento viene inviato dal sistema operativo al browser quando un mouse esterno sia collegato e come posso approfondire il modo in cui viene gestito quell'evento?

+2

Ma che ... diamine ?! Non ho mai visto nulla di simile. Che tipo di stregoneria è questa. Inoltre, potresti pubblicare un violino con markup e stile che fa apparire questa barra di scorrimento?Penso che abbia qualcosa a che fare con lo stryling predefinito del browser che passa dal cellulare al desktop con il mouse esterno. – OptimusCrime

+0

Come è il codice del tuo sito? Se hai un design reattivo, l'idea di OptimusCrime potrebbe avere senso. – wordsmythe

+0

la nostra app è abbastanza coinvolta e ho trovato difficile estrarre un esempio. stiamo usando la flexbox per il layout reattivo. –

risposta

15

Se non sto completamente fraintendendo il tuo problema, allora questo non ha nulla a che fare con il browser, ma piuttosto è una funzionalità di OS X per nascondere le barre di scorrimento (in ogni programma supportato) finché usi un dispositivo di input che non necessita di barre di scorrimento (come il trackpad di MacBook). Se questo è il caso, allora le barre di scorrimento dovrebbero anche apparire, ad es. Finder con il mouse collegato.

Per modificare questo comportamento, accedere a System Preferences>General e selezionare Always sotto Show scroll bars.

+0

grazie, questo è corretto. –

+2

Puoi anche scegliere 'Durante lo scorrimento' per non mostrare le barre di scorrimento anche quando il mouse esterno è collegato. –

1

Per me il problema era che l'utilizzo di unità vw non prendeva in considerazione la larghezza della barra di scorrimento. Cambiare il nostro CSS per usare% invece di vw funziona (50% vs 50vw).

CanIUse.com dice:

Attualmente tutti i browser, ma Firefox considerano erroneamente 100vw essere l'intera larghezza della pagina, tra cui barra di scorrimento verticale, che può causare una barra di scorrimento orizzontale quando overflow: auto viene impostata .

Vai a questa codepen per la prova. http://codepen.io/anon/pen/ZGYNWZ prova con e senza mouse USB.

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> 
Problemi correlati