Detección de funciones para la posición:

Question

Estoy tratando de encontrar un script que detecte si un dispositivo coloca position: fixed elementos relativos al ViewPort y no a todo el documento.

Actualmente, los navegadores de escritorio estándar y Mobile Safari (para iOS 5) lo hacen, mientras que los dispositivos Android colocan los elementos fijos relativos a todo el documento.

he encontrado un par de pruebas para detectar esto, pero ninguno de los parecen funcionar:

• http://kangax.github.com/cft/ me da un falso positivo cuando lo paso desde un dispositivo Android.
• https://gist.github.com/1221602 me da un falso negativo cuando lo paso en un iPhone con iOS 5.

¿Alguien sabe dónde encontrar/cómo escribir una prueba que detecta realmente eso? No quiero confiar en el rastreo del navegador.

Answer 1

De acuerdo con los contribuyentes en Modernizr, no puede hacer esto sin detectar el navegador en uso. Los contribuyentes están bastante bien establecidos en el campo.

Las pruebas para position: fixed en dispositivos iOS y Android se enumeran en Undetectables wiki page en el proyecto Modernizr.

El MobileHTML5 website enumera el soporte para position:fixed. http://mobilehtml5.org/

Answer 2

En realidad, los chicos de Filament Group hicieron una cosa inteligente con Fixedfixed poniendo la cadena del agente de usuario de falsos positivos conocidos en su prueba.

Check it @http://github.com/filamentgroup/fixed-fixed

Alguien podría completar con algunos falsos negativos también, y lo convierten en una prueba adicional featur Modernizr.

Answer 3

He creado otro control si position:fixed es realmente compatible con el navegador. Crea un div fijo e intenta desplazarse y comprobar si la posición del div ha cambiado.

function isPositionFixedSupported(){ 
    var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>"); 
    el.appendTo("body"); 

    var prevScrollTop = jQuery(document).scrollTop(); 
    var expectedResult = 1+prevScrollTop; 
    var scrollChanged = false; 

    //simulate scrolling 
    if (prevScrollTop === 0) { 
     window.scrollTo(0, 1); 
     expectedResult = 2; 
     scrollChanged = true; 
    } 

    //check position of div 
    suppoorted = (el.offset().top === expectedResult); 

    if (scrollChanged) { 
     window.scrollTo(0, prevScrollTop); 
    } 

    el.remove(); 

    return suppoorted; 
} 

Esta función se probó en Firefox 22, Chrome 28, IE 7-10, Android Browser 2.3.