Hmmm... How annoying.
Although my code worked great 'theoretically', I forgot to take something into account: images... Loading avatars, signatures and attachments will change the post's height over time, so in order to enforce a proper minimum height for posts, we have to do it on $(window).load() as well.
So, here are the various solutions...
- Just do it on DOMContentReady. Pro: it's done quickly, you don't see any changes to the page. Cons: any time you have an image (e.g. an avatar!!) in your post, the proper height is incorrect. So you get the action bar halfway between the bottom of your body, and the bottom of the post. Meh... :-/
- Just do it on Load. Pro: it's accurate. The results are the same as with display: flex, and they work across ALL browsers. Cons: on posts with short messages, i.e. where the function will take full effect, you can clearly see the action bar move to the bottom once the page is loaded. Of course how long it takes depends on the number of images in the page... Wedge has less issues than SMF with that, for instance. But it still needs to load avatars...
- Do it in both places. Pro: it's accurate, and the action bar displacement is less visible. The height of the move roughly matches the height of the current avatar. Con: well, you still get the glitch. Also, it takes 6 more bytes than the Load-only solution.
- Do it nowhere... To hell with action bars in the bottom? (Let's just say, I'm... not a fan of that solution.)
- Do it nowhere, keep doing the flexbox model, and pray that all browsers will end up fixing the ton of bugs they have with it.
- Do it nowhere, and use <table> tags for posts. (Right now, if using the JavaScript solution, Wedge uses display:table, which is supposed to be the same as <table>, but isn't exactly -- display:table doesn't support colspan/rowspan, making it impossible to have a flexible height post body, only the last row is flexible.)
Any comments...?
PS: I'm installing the JS hack on Wedge.org, so you can see in action the effect of the "Do it in both places" solution. Also, executing the function on a full topic page takes about 20 to 50ms, multiply that by two if calling twice, although doing it on .load() will have little to no impact on performance.
Posted: April 4th, 2013, 06:16 PM
(And, of COURSE, it isn't working properly in here... -_- Oh, frak. I'm leaving it as is for now.)