Incorrect height in Firefox
bxm156 opened this issue · 1 comments
Attaching jquery-backstretch to a dev with a min-height doesn't render properly in Firefox.
I have a div with a min-height of 50%; In chrome, this renders as I would expect.
The inside div that jquery-backstrectch inserts (class="backstretch") has a height of 120px; cool.
In firefox however, inside div is given a height of 0px, and thus the div/backstretch/images don't show.
If I change from using min-height:50% to using something like, 120px. Both browsers render the batckstretch as I would expect.
Of course, I would prefer to use a percent so my site looks correct on window sizes.
Well that's a browser bug... And min-height is quite problematic, depends on the way the parent's height is determined. If it's a deterministic height - there should not be a problem. But when it's something relative, or based on a min-height itself - then there are edge cases that browsers may implement differently.
The specs are pretty clear about this case, but Firefox has a bug. You should file a bugreport.
In the meantime, throw in some javascript to fix the div's height when the window resizes.