davatron5000 / FitText.js

A jQuery plugin for inflating web type
http://fittextjs.com
6.75k stars 1.39k forks source link

Sizing bug with CSS display:inline and display:inline-block shrinks text to 1px or less #137

Closed AndrewMcSwain closed 9 years ago

AndrewMcSwain commented 9 years ago

As the title suggests, there seems to be a sizing bug when using FitText together with certain CSS display properties: display: inline-block and display: inline. Both of the cases I will explain below occurred inside of a containing div with height set to auto and width set to a percentage using the Susy fluid grid system. If needed I can upload the site where this is occurring to git.

I consider this a bug because I didn't see anything in documentation warning me not to use inline or inline-block with FitText.

In this particular element there is no sizing. Upon modifying the display settings of <h3> the script modified the font size to a miniscule level without any further input from the user. I can increase the size through compressor, using the 0.25 interger, but when I try to shrink my window the text grows uncontrollably and pushes all of the text in below it into spayyyyyyce!

I discovered this when modifying a <h1> element. This one behaved differently.I modified the compressor to an absurd amount just like the other example I mentioned above, but in this case instead of growing uncontrollably it would shrink! The reason for this divergence doesn't seem to be caused by which of the two incompatible display properties I choose.