Mobile Panel jQuery non chiudere completamente solo sul browser di Android

JSFiddle: http://jsfiddle.net/nbh1rn33/Mobile Panel jQuery non chiudere completamente solo sul browser di Android

Ho un problema strano con pannello jQm.

Un pannello aperto non si chiude completamente. Vedi sotto immagine:

enter image description here

Stranamente, questo accade solo su browser di Android, e non su PC (Chrome, IE).

Si tratta di un bug con jQm o ho fatto qualcosa di sbagliato?

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
    <div data-role="page"> 
     <div data-role="header" data-position="fixed" > 
      <h1>Test Page</h1> 
      <div data-type="horizontal" data-role="controlgroup"> 
       <a href="#search_condition_panel" id="search_condition_btn" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-grid">Show Options</a> 
      </div> 
     </div> 
     <div role="main" class="ui-content"> 
     </div> 
     <div data-position-fixed="true" data-role="panel" data-display="overlay" id="search_condition_panel" data-position="right"> 
      <div class="ui-field-contain"> 
       <label for="search-condition-select-brand">Brand</label> 
       <select id="search-condition-select-brand" name="search-condition-select-brand" data-mini="true"> 
       </select> 
      </div> 
     </div> 
     <div id="datepicker"></div> 
    </div> 
</body> 
</html>

fonte

2015-06-03 l46kok

Il tuo codice ha funzionato bene sul mio nuovo Android 5.1.1 Quale browser e versione del sistema operativo stai provando? – chrana

Galqxy S4 Android 4.4.2 browser predefinito. – l46kok

Ho provato a emulare il sito Web sul mio PC come un Samsung S4 in Chrome senza successo nel riprodurre il problema. Ho anche provato il browser azionario sul mio Note 4 senza successo. Sta succedendo anche in altri browser sul tuo telefono? –

apparire come jQuery UI bug, per 1.4.2 non può essere reproduced e reproduced per 1.4.5. Prova sul mio Galaxy S4

La principale differenza nel tuo caso è nelle proprietà сss della classe .ui-panel-closed:

/* 1.4.5 */ 
.ui-panel-closed { 
    width: 0; 
    max-height: 100%; 
    overflow: hidden; 
    visibility: hidden; 
    left: 0; 
    clip: rect(1px,1px,1px,1px); 
} 
/* 1.4.2 */ 
.ui-panel-closed { 
    width: 0; 
    max-height: 100%; 
    overflow: hidden; 
    visibility: hidden; 
}

E se si reimposta left proprietà css per .ui-panel-closed tutto funzionerà fine:

.ui-panel-closed { 
    left: auto !important; // left auto fix problem 
}

fonte

2015-06-10 09:22:06 Pinal

Wow sì che risolto il problema. Mi chiedo come sei andato a indagare su questo problema al telefono – l46kok

Niente di speciale, basta controllare le proprietà dei CSS. Su Android puoi usare [remote debugger] (https://developer.chrome.com/devtools/docs/remote-debugging) per Chrome o bugly [Weinre] (http://people.apache.org/~pmuellr/weinre /) per il browser predefinito Android – Pinal

Mobile Panel jQuery non chiudere completamente solo sul browser di Android

risposta

Problemi correlati