Chrome valign problem about vegas HOT 6 CLOSED

After some investigation, I found that the $img.width() & $img.height() (around line 333 in jquery.vegas.js) are both equal to zero.

Looks like the image isn't loaded yet, so the values aren't defined correctly. And with bad values from there, all the calculation for resize isn't working.

Don't know if there's a way to let Google Chrome for the image to finish loading before trying to resize it ?

from vegas.

Ok, I found a temporary solution that is not ideal, but that is working for Chrome.

in the "imgLoaded()" function (lines 451-456), I changed the setTimeout line to add a small delay of 200ms. So the line now reads like this :

        setTimeout( triggerCallback, 200 );

This value of 200 is totaly arbitrary since it may change from CPU to CPU and also from different images sizes or network lag.
The idea is to give Chrome enough time to completly load the image before trying to get it's width & height.

Still not perfect, but better than it was before.

from vegas.

I found the same problem with Chrome not getting the image dimensions in time for the first image to load correctly. The problem shows up as the image filling the screen width, but not the height. This is because the resize script is not able to calculate the image size ratio. For my website, all my background images are the same size (1200x800 pixels), so I added a simple line in the resize function at line #341:
if (isNaN(ri)) ri = 800/1200;
This works nicely now even though it's only a temporary fix.

from vegas.

I tried these answers, but no joy for me. I'm also showing the same error on mobile browsers.

Any other fixes out there? Help!

Thanks!

from vegas.

This issue occurs because Webkit-browsers are not reliable when it comes to the Image load event. Therefore, image dimensions are not always available when you need them. I've tried many different hacks/solutions, to correctly fire the load event, but no fix produced a real consistent result. The only way to fix this issue is by forcing Vegas to resize the image when all files are loaded. This can be accomplished by binding the resize function to the Window load event.

Line 70:

$( window ).bind( 'load resize.vegas', function( e ) {

Note that this doesn't really fix the problem. If you have a webpage that loads a lot of other files, it can take a while before the resize event is triggered. However, if your webpage only loads a couple of images, this solution will look fine.

from vegas.

Thank you all for your contributions and fixes. I will add them to the next release. I hope the issue will be definitely fixed.

from vegas.