Images not aligning in Safari

I am unable to reproduce the error. Can you confirm that this is still an issue?

I tested on a macbook pro running OSX 10.9.5. Everything looks fine in Safari and Chrome.

Hi! I’m having the same issue. (I’m not sure if I’m supposed to post to this thread or start a new one…)

My client’s site is: https://itsmecharlotte.com
The page with the plugin is: https://itsmecharlotte.com/recipe-index/

Sometimes when I load the page, it looks fine, and other times, the square thumbnails get jumbled along the vertical axis. This seems to happen randomly, and if I refresh the page, it will either look normal again or show a different variation of the jumble.

If you aren’t seeing it in Safari, try refreshing the page. The issue doesn’t does seem to show up in other browsers.

The issue is showing up on my Macbook pro using Safari 6.1.5, and on my client’s Mac using Safari 8.0.1.

I also see the issue happening on these sites when loaded in Safari:
https://jenniferfeasts.com/recipes-2/
https://alimentageuse.com/home/recipes/vegan-recipes/
https://strawberriesforsupper.com/recipe-index/
https://stinkykitchen.com/recipes/

Here are screenshots: 1 | 2 | 3

Thank you for your time & help!! I love the plugin, but my client primarily uses Safari, so it’s really important that I figure out how to fix this.

Hi,
Thank you for the confirmation of the issue and the screenshots. This is very helpful and will help me debug it.

That said, intermittent errors are notoriously difficult. If anyone that knows CSS quite well reads this and has some ideas please let me know.

I’m hoping you can help me debug this, as I haven’t been able to reproduce it on my end.

Is there any pattern at all? Does this happen only when there is a full-refresh? I want to rule out browser image caching issues.

If you take a static snapshot of the page (i.e. save the page as full html) then open that page in your browser does the issue still happen?

What happens if you manually add in “height” and “width” attributes to the image tags. Does this fix it? Note that these should simply be set to whatever the “h” and “w” attributes that are being passed to TimThumb are set to.

Hi there,

Take a look at this screencast of the error.

If I turn on and off the bottom-margin: -50px it fixes itself. And also, sometimes when I simply click on ‘Inspect Element’ in safari the issue resolves itself.

Could that be related to the browser caching?

Hi Kremental,

Thanks for looking into this. There doesn’t seem to be any pattern at all. It happens on the first load as well as reloads, all though occasionally (5-10% of the time) the issue disappears.

Looking into your other two questions (static snapshot & height/width attributes).

Ok, here’s what I’ve tried for you:

I turned off the cache program for itsmecharlotte.com (WP SuperCache). This seems to partially fix the problem. The recipe index page seems to load fine the first time (occasionally they images will appear jumbled at first but then “adjust” themselves back into a regular grid).

If I click on the page’s link in the top navbar (Recipes), the page reloads fine. If I hit Safari’s reload button (circular arrow), it reloads with the thumbnails jumbled. As I mentioned before, they seem to be in a different arrangement with every reload.

I saved the HTML page as you suggested it and reopened it in Safari multiple times– as far as I can tell this doesn’t recreate the jumbled effect.

I can’t quite understand what you mean by this:

What happens if you manually add in “height” and “width” attributes to the image tags. Does this fix it? Note that these should simply be set to whatever the “h” and “w” attributes that are being passed to TimThumb are set to.

Can you try to rephrase it with very specific directions? I’m pretty new to CSS/web development don’t know what you mean by some things (attributes, image tags).

So– do you think there might be a solution to make it stay aligned on reloads too? And do you think I’ll be able to use any caching plugins at all with the Visual Recipe Index plugin?

Thank you!!

Hi again,

I’ve asked a developer friend who only had a few minutes to answer, but here’s the jist that I got: He said something about switching from “inline-block” to floats. He also said that what would probably fix the problem is “trying to delay the instantiation of the plugin’s javascript until a little later after page load.”

Is this something you can do or give me (specific) directions to try out? Definitely not something I know how to do on my own…

Thanks again,
April

Hi there,

Any updates on this, or any things I can try for you on my end?
Thanks!
April