1. casa
  2. Domanda e risposta
  3. Problemi con posizione CSS: fissate in iOS 9 iPhone 6+ in modalità orizzontale

Problemi con posizione CSS: fissate in iOS 9 iPhone 6+ in modalità orizzontale

2016-02-22 19 views
6

ho trovato un problema strano con il mio colpo di testa fisso in presenza delle seguenti condizioni:Problemi con posizione CSS: fissate in iOS 9 iPhone 6+ in modalità orizzontale

  1. iphone 6+, modalità paesaggio
  2. safari, a almeno due alette aperte
  3. mia pagina ha una posizione: un'intestazione fissa e un corpo e hTML con position: relative, altezza: 100%

Dopo caricamento della pagina e durante lo scorrimento verso il basso, tutto funziona bene, l'intestazione è sul posto e web insp ettore mostra correttamente:

enter image description here enter image description here

Ma quando si scorrere verso l'alto e tirare la pagina verso il basso dello schermo e rilascia, l'intestazione è ancora visibile sulla pagina, ma in realtà si è spostato da qualche parte sotto la finestra (vedi che il web inspector non lo evidenzia).

enter image description here

questo fatto si traduce in tutti gli elementi di intestazione essendo inaccessibile: non è possibile aprire il menu, cliccare sul logo, o il pulsante di contatto.

L'intestazione torna alla normalità quando:

  1. si scorre verso il basso (ma si rompe di nuovo quando si scorre il backup)
  2. passare a un'altra scheda e ritorno
  3. o chiudere altre schede

Ho provato a cambiare DOM o/e CSS dell'intestazione e del corpo, ma nulla riporta l'intestazione allo stato normale.

Qualche idea su come può essere risolto?

fonte

2016-02-22 Grin

+3

possiamo ottenere un violino o meglio ancora un esempio dal vivo che siamo in grado di eseguire il debug? –

risposta

0

Mi dispiace essere il messaggero di cattive notizie, ma non ho idea di quale sia il tuo vero problema dal momento che non hai postato alcun codice reale. Tuttavia, suppongo che dal momento che il tuo problema è position:fixed, il modo migliore per risolverlo è smettere di usare position:fixed perché sembra non funzionare per te. Ecco come si può ugualmente-intoppi emulare utilizzando solo il posizionamento assoluto e relativo:

<html id="eHTML"> 
 
<style> 
 
#eHTML { position: static } 
 
#eBODY { position: relative; overflow:hidden } 
 
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 } 
 
#eBODY>div { position:absolute; left:0;bottom:0 } 
 
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden} 
 
#main {background-color:#ff8;width:100%;height:100%;overflow:auto} 
 
</style> 
 
<body id=eBODY> 
 
<div id=main> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p> 
 
<p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
 
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,</p> 
 
<p>sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p> 
 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
 
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</p> 
 
<p>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
 
<br /><br /><br /><br /> 
 
</div> 
 
<div id="footer"> 
 
Some Random Fixed<br /> 
 
Content! Yay, it workz! 
 
</div> 
 
</body> 
 
</html>

fonte

2017-05-24 05:33:04

Problemi correlati

 Problemi correlati