jQuery problema posición con Chrome

Cuando alertar al valor .position().left, devuelve 0 en Chrome. Con otros navegadores devuelve el número real. ¿Por qué pasó esto?jQuery problema posición con Chrome

Fuente

2010-01-31 goksel

favor publique más código, específicamente sobre qué elemento está llamando 'position', y quizás algo de HTML/CSS para ver qué podría estar yendo mal. –

navegadores basados en Webkit (como Chr ome y Safari) se puede acceder a las imágenes width y height propiedades sólo después de que las imágenes han sido completamente cargados. Otros navegadores pueden acceder a esta información tan pronto como se carga el DOM (no es necesario que carguen las imágenes por completo para conocer su tamaño).

Por lo tanto, si usted tiene imágenes en su página, con navegadores basados en Webkit que debe tener acceso a la información offset después de los $(window).load desencadena el evento, y no después del evento $(document).ready.

Fuente

2011-07-06 05:55:57

Y a veces, incluso entonces, no funciona. Otra opción es configurar manualmente los tamaños de imagen en su CSS. –

Y aparentemente webkit solo puede acceder a las propiedades de ancho y alto del texto después de window.load también. Parece tonto que incluso Internet Explorer pueda hacerlo bien. El último que pensé que lo haría mal fue webkit. –

Webkit puede ser demasiado rápido a veces, pero a menudo es atendida en jQuery. Puede depurar usando algo como:

var v, elem = $('.myElement'); 
window.setTimeout(function() { 
    v = elem.position().left; 
    console.log(v); 
    if (v) { 
     return false; 
    } 
    window.setTimeout(arguments.callee, 1); 
}, 1);

Este comprobará si y cuando la posición está disponible. Si está registrando "0" en infinito, el position().left "nunca" está disponible y necesita depurar en otro lugar.

Fuente

2010-01-31 20:34:43 David

genial, gracias por ayudar a David. – goksel

Gracias: esta fue también la razón por la cual 'jQuery.offset()' devolvía valores incorrectos (distintos de cero) - parece que mi posición CSS estaba causando que Chrome distribuyera el documento dos veces (o algo así). Llamar a 'offset' demasiado pronto devolvió la posición de los elementos como lo harían sin CSS. – Justin

+1 Tuve este problema ayer. La posición era incorrecta incluso en un simple '$ (función() {console.log ($ ('img'). Position(). Top);});' pero era correcta cuando se usa el mismo código en un evento de clic más adelante. – andyb

que tenían el mismo problema ..

me fijo usando: .offset().left lugar. Pero tenga en cuenta que no son los mismos: http://api.jquery.com/offset/

.position().left trabajaron en Chrome en algunas pruebas que hice, usando un enfoque similar de David (el valor estaba disponible ya que el primer intento).

En mi aplicación "real" falló incluso leyendo la posición en el evento de clic (que puede eliminar cualquier problema de velocidad de carga ). Algunos comentarios (en otro foro) dicen que puede estar relacionado al uso de display:inline-block. Sin embargo, no podía reproducir el problema utilizando inline-block. Entonces puede ser ser otra cosa.

Fuente

2010-02-24 06:00:10 lepe

Al leer los comentarios de http://api.jquery.com/position/, hay varias maneras de solucionar este problema. El que encontré trabajo es

Ajaho [Moderador]: Esta función plug-in soluciona problemas con una posición incorrecta en Chrome

jQuery.fn.aPosition = function() { 
    thisLeft = this.offset().left; 
    thisTop = this.offset().top; 
    thisParent = this.parent(); 

    parentLeft = thisParent.offset().left; 
    parentTop = thisParent.offset().top; 

    return { 
     left: thisLeft-parentLeft, 
     top: thisTop-parentTop 
    }; 
};

Fuente

2010-04-28 15:01:35 user227353

Funciona de maravilla para mi problema ... ¡gracias! –

Tal vez un poco anticuado ya que las fechas de preguntas a partir de 2010, pero esto hizo el truco para mis problemas de posicionamiento en Chrome:

$(window).load(function(){ 
    p = $('element').offset(); 
    // et cetera 
});

Fuente

2011-04-17 13:11:30 Hekman

uso de jQuery (ventana) .load() en lugar de jQuery ready (documento)()

Fuente

2012-03-30 19:15:17 zuckerhut

-1

utilizo esta función para corregirla.

function getElementPosition(id) { 
      var offsetTrail = document.getElementById(id); 
      var offsetBottom = 0; 
      var offsetTop = 0; 
      while (offsetTrail) { 
       offsetBottom += offsetTrail.offsetBottom; 
       offsetTop += offsetTrail.offsetTop; 
       offsetTrail = offsetTrail.offsetParent; 
      } 

      return { 
       bottom: offsetBottom, 
       toppos: offsetTop 
      }; 
     }

Fuente

2013-05-28 03:47:05 user2129794

Para mí trabajaban colocando el código JavaScript en un documento listo justo antes del cierre de la etiqueta del cuerpo

De esta forma se ejecuta el código después de que se haya cargado todo

<body> 
     <div>content</div> 
     <div class='footer'>footer</div> 
     . 
     . 
     . 

     <script type='text/javascript> 
      $(document).ready(function(){ 
       var footer_position = $(".footer").offset().top; 
       console.log(footer_position); 
      }); 
     </script> 
    </body>

Fuente

2013-08-22 11:44:35

jQuery problema posición con Chrome

Respuesta

Cuestiones relacionadas