Ramiro Franco

Inline-block-parents Are Terrible.

Written on Wednesday August 22, 2012 at 9:41 p.m.

I recently ran into this strange "jitter" with elements animated by jQuery, and searching for the culprit I found that a parent element set to inline-block in order to auto-adjust the width to the content was the source of my problem.

Normally, I don't really see an issue with people using inline-blocks for parent elements ( despite the title), though I'm not particular for it when a block is not really meant to be displayed inline but as a document-container.

In this situation it was causing some visually jarring problems in animation, but we still needed the block to expand to the size of the content dynamically.

I of course turned to more jQuery / JavaScript (CoffeeScript) for a solution, and found a pretty simple one:

This does a fantastic thing where, we find out what the size of the block turns out to be for its particular instance, and we just set it manually before switching it to a block. No flicker, or fuss, just a super easy solution. If only that were the case more often.