Firefox Trouble . A Float Container Is Longer Than The Child?

I've created a css responsive div (try to resize the browser window: you will see the height of the box resizing accordly):

Solution 1:

You're floating #footer-logo, and having #footer-logo img scale according to the space made available to #footer-logo by the pseudo-element. Note that floated elements shrink to fit their contents by default, and the shrink-to-fit algorithm may vary across browsers, although in this case I would expect the browser to calculate the width of the image, then have #footer-logo shrink to fit that width accordingly.

It looks like browsers other than Chrome choose to calculate the width of #footer-logo according to the actual width (or intrinsic width) of the image, and then keep it fixed at that value (it does not expand even when the image starts growing larger than its original size). The height continues to scale as normal, since you set its height to 100% of its parent (and the parent height is determined by the padding from its pseudo-element).

But the behavior you see in other browsers is nothing compared to Chrome. If you make the #footer-logo img semi-transparent in order to get a peek at how #footer-logo is being rendered:

#footer-logoimg
{
    height:100%;
    width:auto;
    opacity:0.5;
}

You'll see that Chrome doesn't even render #footer-logo at all until you mess with the page zoom. Not resize the browser, but zoom the page.

And once you do manage to get it to render, Chrome starts behaving somewhat (only somewhat) like the other browsers, fixing the width of #footer-logo at whatever it was rendered at. Where it differs is that when you scale down the page, the image will not become any smaller than #footer-logo, as though it were forcing a minimum width on the image. Again, this never happens on any of the other browsers.

And every time you change the page zoom, Chrome redraws both #footer-logo and the image.

This is the first time I've seen an edge case in CSS where every browser manages to demonstrate spectacularly buggy behavior (with Chrome just completely falling apart, unsurprisingly).

Share