ie10, border-radius, overflow, posizione e posizione nascosta: bambino fisso

Question

Mi sono imbattuto in qualcosa di strano con IE10 e IE9, non influendo su IE8: un elemento figlio "position: fixed" è nascosto quando il limite-raggio, overflow e la posizione del suo genitore è impostata (vedere l'esempio jsfiddle). Se una di queste proprietà è disabilitata, viene visualizzato l'elemento fisso.

Ho messo un esempio dal vivo a http://jsfiddle.net/arkhi/7Nydz/.

<div style="position:relative; border-radius:5px; overflow:hidden;"> 
    <a style="position:fixed">fixed child</a> 
</div> 

2. Idealmente, tutte le caselle rosse dovrebbero comparire in basso a destra della pagina, da destra a sinistra.
3. Su IE9 e IE10, la prima casella è nascosta.
4. Se si esegue una "selezione di tutti", quindi si fa clic in qualche punto della pagina, accade che venga visualizzata la prima casella.

Mi piacerebbe sapere se qualcuno ha qualche spiegazione o collegamento che spiega questo bug (se questo è un bug e non io non vedo l'ovvio).

Grazie mille per qualsiasi feedback su questo!

Answer 1

sembra essere un problema comune:

Fortunatamente, c'è una soluzione rapida e sporca: è sufficiente posizionare un vuoto statico <div></div> immediatamente prima e o dopo dell'elemento non posizionato/posizione assoluta. Nell'esempio fisso, un vuoto <div></div> dopo l'intestazione impedisce il verificarsi del problema.

I devoti della semantica dell'HTML saranno inorriditi, ma temo che non ci sia una correzione solo per CSS ... a meno che qualcuno non sappia diversamente ...

http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/

Answer 2

In assenza di una risposta utile da chiunque altro, l'unico modo sono riuscito a risolvere questo è quello di aggiungere un elemento nidificato ulteriore, e dividere i tre stili colpite in due strati .

<div>  //style with position:fixed 
    <div> //style with overflow:hidden and border-radius 
    .... 
    </div> 
</div> 

Non è l'ideale, ma risolve il problema.

Per dimostrare che funziona, ecco la vostra jsFiddle con la modifica apportata al test-1: http://jsfiddle.net/7Nydz/2/

Answer 3

Quindi questo è solo un'idea e non posso testare perché sono su un Mac e non hanno una macchina Windows a portata di mano proprio adesso. Ma hai provato a usare un clearfix sull'elemento fisso? Ciò farà sì che il browser gestisca l'elemento in modo diverso e visualizzi qualcosa di aggiuntivo dopo di esso. Con un po 'di fortuna potrebbe apparire?

Probabilmente non funziona, ma a volte accadono cose strane.