Ho un piccolo bug curioso in alcuni HTML che appare solo in Firefox 17 (OSX 10.8.2, nessun altro SO ancora testato). Ho una classe css 'sidebar' che racchiude del testo che è un elemento ripetuto su un numero di pagine. Su una sola pagina (solo) questo testo viene visualizzato come se avesse la sua proprietà visiblility css impostata su 'hidden' (non viene visualizzata, ma lascia lo spazio corretto attorno a sé).come isolare il bug di rendering di firefox 17
sinistra Firefox 16.0.2; destra Firefox 17.0.1
Ecco la classe CSS:
.sidebar {
position:fixed;
top: 2px;
left:4px;
display:table-cell;
vertical-align:bottom;
z-index: 2;
width: 700px;
height: 64px;
-webkit-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
-moz-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
-o-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
-ms-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
}
Il codice HTML interessata:
<div class="sidebar" >
<span class="TMUP1">
<a href="/">Section_Header</a>
</span>
<span class="sidebarcontents" style="vertical-align: 50%">
Subsection_Header
</span>
</div>
Tutte le pagine del sito contengono un pezzo identico di monitoraggio di Google Analytics asincrono javascript. Se rimuovo questo codice, l'errore scompare. Ho controllato il codice ed è corretto. E 'utilizzato in ogni pagina del sito, e tutte le altre pagine, con gli stessi html (si tratta di un colpo di testa di ripetere) rendono bene
Google js codice:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000-0']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Il bug scompare sotto una delle seguenti condizioni
- visualizzato in firefox 16 (stesse impostazioni utente e plugin), o qualsiasi altro browser.
- visto in Firefox 17/modalità sicura
- rimuovere il codice Google Analytics
- sostituire la seguente riga dal 'sidebar' classe CSS
-moz-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
con
-moz-transform: translateX(320px) translateY(340px) scale(1);
(vale a dire rimuovere la rotazione)
Non ha nulla a che fare con plugin e addon, come se io disabiliti manualmente tutti questi bug è ancora e vident.
Altre pagine con lo stesso codice HTML, stesso css e lo stesso codice di Google Analytics rendono bene.
La pagina del problema è la più grande del sito (~ 10 KB di html ottimizzato/gzip con circa 160 immagini piccole/880 KB da caricare), tutte le altre pagine sono più piccole.
Il corpo è quasi interamente costituito da 160 ripetizioni di questo elemento
<div class= "outerDiv" style="background-color:transparent">
<div class="innerDiv">
<a href='/artists/artist_name/'>
<img src="/artists/artist_name/_portrait/artist_portrait.jpg" alt="" width="150" />
</a>
<div class="short_caption">
<a href='/artists/artist_name/' style="color:white">artist_name</a>
<br />artist_location
</div></div></div>
Se drasticamente ridotto il numero di questi elementi giù questo risolve anche il problema.
Qualche idea su come isolare ulteriormente/correggere l'errore? Al momento sembra che dovrei sacrificare l'analisi o riprogettare il sito, che sembrano entrambi un po 'eccessivi.
aggiornamento
ho fatto molto di più indagare, e ottenuto fino a questo.
- non ha nulla a che fare con google javascript. QUALSIASI script, anche un vuoto
<script></script>invocherà il bug. - Sto utilizzando caratteri personalizzati con @ font-face estratto da un foglio di stile collegato.
- Se utilizzo solo i caratteri di sistema, l'errore scompare.
- se mi trasferisco le regole @ font-face da un foglio di stile collegato nell'intestazione pagina il bug diventa più resistente: si presenta indipendentemente dalla presenza di tag script
- disattivare l'accelerazione hardware, i scompare bug .
- rimuovere la rotazione dalla trasformazione, l'errore scompare.
- ridurre le dimensioni della pagina (da 160 immagini a circa 10) e l'errore scompare.
- Firefox nightly (v20) non mostra il bug in modo da qualunque sta causando è fissato in qualche futura versione v17.0.1 dopo
Ecco alcune pagine di esempio che mostra il problema (che avevo li evitato in domanda originale come suppongo che il collegamento sia un po 'disapprovato qui). cache del browser deve essere svuotato tra ogni visualizzazione della pagina per valutare l'effetto insetto accuratamente
- original page bug presente
- test page bug presente
- html semplificato e css minimizzato per isolare l'insetto
- javascript ma uno vuoto
<script></script>tag
Questi campioni sono tutti derivati dalla pagina di prova:
<script></script>tag removed insetto assentarsi- rotation removed from transform insetto assentarsi
- page size reduced from 160 to 18 images insetto assentarsi
- no custom fonts insetto assentarsi
- internal stylesheet for custom fonts bug presente
- thi s è strano Se il foglio di stile @font_face è esterno, il bug mostra solo se è presente un tag
<script></script>. Se le regole @font_face vengono spostate su un foglio di stile interno, il bug è evidente anche in assenza dei tag<script></script>.
- thi s è strano Se il foglio di stile @font_face è esterno, il bug mostra solo se è presente un tag
Non riesco a eliminare il bug senza modificare il disegno della pagina a tal punto avrei dovuto ridisegnare il sito che sembra un po 'OTT per una versione di uno del browser. Sto sperando in una soluzione più pratica. Ho provato ad usare jQuery browser sniffing ma come javascript sembra introdurre il bug che è un non-starter.
aggiornamento 2
ora ho avuto la possibilità di testare su una macchina diversa, e trovare il bug si manifesta molto raramente. Il test come nuovo utente sulla macchina originale non mostra affatto l'errore. Quindi è chiaramente qualcosa a che fare con le impostazioni dell'utente e - si spera quindi - abbastanza raro.
aggiornamento 3
un rilievo del @Boris, ho cercato rotazione incrementale per vedere dove e come la pagina è rottura. Va bene da ruotare (0 gradi) fino a circa 80 gradi, dopo di che inizia a cadere a pezzi. Ho aggiunto i confini 1px a tutti gli elementi per isolare il problema ...
- sample pages mostrando 0-90deg (dovrebbero rimbalzare da uno all'altro in aggiornamento automatico).
Questo sta usando-moz-transformquindi vale la pena guardare in Firefox. - animation: questo è il risultato che sto ottenendo in Firefox 17.0.1
aggiornamento 4
rispondendo alcuni suggerimenti da @arttronics - ecco un 3d firefox view che mostra come dovrebbe impilare fino (quando Passando alla visualizzazione 3d, il bug scompare, come se Firefox stesse cercando solo un po 'più difficile di fare la cosa giusta).
- il contenuto sporgente visto nella vista 3D è per l'allineamento del testo, non influisce sul bug - see this cut-down version;
- lo zoom viene ripristinato, nessuna modifica;
- un nuovo profilo utente presenta lo stesso comportamento.
aggiornamento 5 - reset Firefox
Dopo aver eseguito un reset Firefox (come per ogni risposta @arttronics') il bug è ancora qui, anche se forse un po 'meno resistente.
Prima di ripristinare questo sarebbe richiamare il bug
- cancellare la cache
- aggiornare la pagina
Post-reset, svuotare la cache e rinfrescante porta in primo piano il bug circa il 50% del tempo. Se svuoto la cache, riavvia firefox, ritorna alla pagina: è sempre lì, ogni volta.
Ok, ho intenzione di rispondere alla mia domanda ...Non ho trovato una soluzione, ma grazie all'interesse e sorprendenti sforzi della comunità di overflow dello stack sembra abbastanza chiaro per me che ...
- questo può essere un problema che è molto difficile da replicare al di là delle peculiarità del mio setup utente
- si tratta di un bug oscuro manifestano solo in Firefox 17.0.1 e apparentemente risolto in Firefox 18
- non v'è alcuna soluzione che non comporta un sito di riprogettazione
Pertanto, nell'interesse di andare avanti con altri problemi, suggerisco di mettere questo problema riposare! Grazie a tutti coloro che hanno fatto commenti e suggerimenti, è stato un processo molto educativo.
un codice vale più di mille parole:) – akonsu
AdBlock? Ghostery? Qualunque tua estensione potrebbe causare questo problema. Soprattutto perché il codice funziona in "modalità sicura", che disabilita tutte le estensioni e le barre degli strumenti. – Soumya
@akonsu, punto preso, codice aggiunto! – foundry