0

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

  • If the image dimensions are unknown because it is part of dynamically generated content, aren't you able to provide the dimensions dynamically as well? – cimmanon Sep 25 '13 at 19:54
  • @cimmanon - no, these are results from the facebook api - they do have some pictures that they allow you to control the sizing of, but not the ones I need. –  Sep 25 '13 at 19:57
  • Just because the FB API doesn't explicitly provide the image dimensions doesn't mean you *can't* get them (see: http://stackoverflow.com/a/626505/1652962). – cimmanon Sep 25 '13 at 20:13
  • @that's just my problem, these images don't even show the correct size - so how should I get it via javascript. I suppose I could duplicate the image and load it via javascript first, but that complicates matters a lot and still there are certain browser versions that do not correctly send the image complete event. –  Sep 25 '13 at 20:17

3 Answers3

1

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

0

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

drip
  • 12,378
  • 2
  • 30
  • 49
  • thanks, but unfortunately this doesn't work. It only works the second time you load the page - so after the image is loaded. If you completely close and re-open the browser you'll see that on first page load, the image is not getting a proper size. –  Sep 25 '13 at 19:53
  • Yep you are right. Okay then how about removing the box-sizing property, and making max-width around 97-98% ; since it seems, that's what is making safari fail ? – drip Sep 25 '13 at 19:59
  • actually it's the float:left that makes it fail (that or the box-sizing) - but I really need the box sizing to make stuff work, see my updated message. –  Sep 25 '13 at 20:00
  • I think you can achieve the same thing like so: http://jsfiddle.net/Kju6z/6/ (without the box-sizing), not perfect but it seems that it works. At least on my side - cleared my safari cache a few times. xd – drip Sep 25 '13 at 20:09
  • I need this to work at all kinds of different configurations (padding sizes, border sizes, roundness, etc) - so I don't think your 90% solution would work in that case. –  Sep 25 '13 at 20:14
0
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

Svetlana Silina
  • 76
  • 4