Problem with images not displaying on iPad

This is a weird issue I haven’t come across before and would like to see if anyone has any ideas.

On this page I list out a large amount of brand logos. The design is responsive, and so the logos scale depending on browser size. The images are wrapped within a span which uses display: table-cell; so that the logo inside can vertically center.

On an iPad (iPad 2 & 3 tested) most of the logos do not appear at all - however if you change the orientation of the iPad, they then show up instantly. They are now permanently there for the session. It is as if they have loaded, but they are invisible. Doing a refresh also shows all images.

If anyone has encountered this before and has any ideas it would be really appreciated.

http://www.bigcoupons.com.au/stores.php

Justin,

Hi, Welcome to Sitepoint:)

I may be misunderstanding your question a little but you seem to have turned the logo images off for screens smaller than 600px (including desktop).


@media screen and (max-width: 600px)
#all-stores .alpha .thumb {
display: none;
}

That rule will stop the logos showing devices smaller than 600px.

On my ipad in both landscape and portrait the images are showing the same as they do on the desktop.

It’s also worth putting the natural size of the image in the image attributes even though you are over-riding with css as this helps the browser allocate space.

Hi Paul,

That CSS is to hide the thumbnails on a mobile device. It doesn’t conflict with the iPad landscape view which is 1024px wide.

Good suggestion on providing the natural size. I’ll give that a go.

Appreciate the reply.