Menu icon Foundation
Equalizer Behaves Weird in Webkit Browsers

I am using Equalizer on a site and it works great in Firefox, however, when I load the site in Chrome for the first time it doesn't work. If I refresh the site works fine. It appears to only happen the first time the site is loaded. Any thoughts as to a solution or why this happens?

Here is the page in question: http://www.bellesfarm.com/me-myself/

Image of the problem:

Screen shot 2014 03 08 at 12.53.22 pm

Update:

My client tells me it doesn't fix upon refresh on one of his computers.

Thoughts?

Equalizerchrome

I am using Equalizer on a site and it works great in Firefox, however, when I load the site in Chrome for the first time it doesn't work. If I refresh the site works fine. It appears to only happen the first time the site is loaded. Any thoughts as to a solution or why this happens?

Here is the page in question: http://www.bellesfarm.com/me-myself/

Image of the problem:

Screen shot 2014 03 08 at 12.53.22 pm

Update:

My client tells me it doesn't fix upon refresh on one of his computers.

Thoughts?

Shawn Jones almost 5 years ago

I am having a similar issue. I don't have anything helpful, just want to make sure I watch this thread.

Lynda Spangler almost 5 years ago

I posted this as an issue on Github: https://github.com/zurb/foundation/issues/4629

Jeremy Englert almost 5 years ago

Same issue. Happens in Mobile Chrome as well.

Lynda Spangler almost 5 years ago

I believe this is a webkit issue more than just Chrome.

Mikael Hulkko almost 5 years ago

Also have this problem. It seems to be related to images (and image height). I have the same equalizer setup across a number of identical webpages, and the issue only occurs on the pages that has an image on it.

Edit: On GitHub it's speculated that the problem may be due to height being calculated prior to images being loaded..

Seems right.

Shawn Jones almost 5 years ago

Are there any suggestions on how to work around this?

Jeremy Englert almost 5 years ago

Would it be possible to have Equalizer fire after all images have been loaded?

Zackery Gianotti over 4 years ago

I am experiencing the same issue here on www.zmgdesigns.com/rmp/index.php -- As a work around, you can set a predetermined height. It is a little bit of a pain in the ass, but it does work. You can use Chrome's inspect element or Firefox's FireBug to find out how long each column might be. Find your tallest column and then apply a min-height:XXX of a few pixels taller than that to all the columns in the row. Can't expect Foundation to do it ALL for you ;-)

P.S. -- I left this page broken for 24 hours (corrected 4/8/14)

Happy Coding!