CODEWITHSUNDEEP
csssafari
user429620
user429620

Reputation:

Disappearing images in safari 5

EDIT:

If I remove 

.box-media-link-container {
float:left;
}

it works as expected. Is there any good explanation for this? Is there any alternative for float:left ? (Other than tables)

Working example (non floated container): http://jsfiddle.net/Kju6z/5/

(Edit 2: Even this is not the holy grail, in more advanced examples - this still fails, even without the float).

If you can run safari 5.1 (via http://browserstack.com or similar) - please check this out. I'm not sure what the cause of this is any more.

http://jsfiddle.net/Kju6z/

.box-media-box .box-media-link {
max-width:75px;
width:auto;
height:auto;
} 

.box-media img {
max-width:100%;
height:auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;
overflow:hidden;
}

The floated image width is not known beforehand, but the image container has a max-width set of 75px (note that in this case, I do know that the image is in fact 100px - but that's just for the example).

The image itself has a max-width of 100% and a height of auto, so that it is responsive.

This seems to work in all browsers except safari, this one doesn't even display the image. It does so at times though, which makes me think the issue may be caused by the images not yet being loaded whilst the CSS is interpreted, could that be?

See attached screenshot for how it looks in Safari 5.1 (the little black bordered circle is supposed to contain the image). It looks as if the image has not loaded yet (since there is no width or height set), but the image never loads. Only when you go to inspect element it either pops up immediately, or after you change any one property.

enter image description here

Upvotes: 0

Views: 839

Answers (3)

Svetlana Silina
Svetlana Silina

Reputation: 106

max-width: intrinsic;
max-width: -moz-max-content;
max-width: 100%;

This helped.

check here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Upvotes: 0

user429620
user429620

Reputation:

Well, I used a customized version of the waitForImages plugin, to check each image and see if it's loaded. Before it's loaded, it's hidden and doesn't have a float:left - after it's loaded the float:left is added and it is shown. This seems to fix the problem.

The customization of the waitForImages plugin was to also fire the eachCallback on cached images, so that they too can have the image shown.

https://github.com/alexanderdickson/waitForImages

Upvotes: 1

drip
drip

Reputation: 12943

You can add some random height attribute to the image (since in the css you are making it auto once again).

Here is a demo, in which I only added height="2" to the image, and it's ok under safari.

<img class="box-picture" src="http://placehold.it/100x100/cccccc/ffffff&amp;text=thumb" height="2" />

jsFiddle

Upvotes: 0

Related Questions