Problem when using maxfontsize

[skmbr]

Hi there!

I'm having a problem when using maxfontsize and resizing the screen to the point at which the font size should start to reduce.

http://jsfiddle.net/bcs9t5ss/

When I resize the preview window, the font doesn't start to resize until the window is ~20px smaller than the text. As I continue to reduce the size of the window the font size judders for the next ~20px before the font then starts to reduce in size more smoothly.

Video: http://quick.as/Zm66F7jx

This is using Chrome 37 on OS X Mavericks. In Safari and Firefox the behaviour is similar, but less jerky.

[skmbr]

Interestingly if I comment out the following 4 lines it seems to work fine:

          if(newFontSize + j*intervals[m] > maxFontSize) {
            newFontSize = maxFontSize;
            break outer;
          }

Can anyone tell me what problems removing that code is likely to cause?

[zachleat]

Can you try again with 0.1.8? I changed some of the resize logic.

[alexrumsey]

I'm using 0.1.8 and I am having the same issue. Commenting out the same 4 lines that skmbr mentioned above fixed the issue for me.

[pasqualevitiello]

Confirm, commenting those lines fixed the issue.

[mthurman]

I can confirm. I added some logging by moving this console.log up a line so it's always run: https://github.com/zachleat/BigText/blob/master/src/bigtext.js#L139. And adding logging form and j in the 2 loops. Here's a broken run (using maxFontSize: 98 and keeping those lines uncommented). My maxwidth is 560.

409 " previous: 0" "font-size at 8" "prior: 59" "new:67"
m 0 j 2
457 " previous: 409" "font-size at 8" "prior: 67" "new:75"
m 0 j 3
506 " previous: 457" "font-size at 8" "prior: 75" "new:83"
m 0 j 4
555 " previous: 506" "font-size at 8" "prior: 83" "new:91"
m 0 j 5
599 " previous: 0" "word-spacing at 1" "prior: 0" "new:1"

Here's another run commenting those lines out but keeping maxFontSize: 98

m 0 j 1
409 " previous: 0" "font-size at 8" "prior: 59" "new:67"
m 0 j 2
457 " previous: 409" "font-size at 8" "prior: 67" "new:75"
m 0 j 3
506 " previous: 457" "font-size at 8" "prior: 75" "new:83"
m 0 j 4
555 " previous: 506" "font-size at 8" "prior: 83" "new:91"
m 0 j 5
604 " previous: 555" "font-size at 8" "prior: 91" "new:99"
m 1 j 1
579 " previous: 0" "font-size at 4" "prior: 91" "new:95"
m 2 j 1
561 " previous: 0" "font-size at 1" "prior: 91" "new:92"
m 3 j 1
555 " previous: 0" "font-size at 0.1" "prior: 91" "new:91.1"
m 3 j 2
556 " previous: 555" "font-size at 0.1" "prior: 91.10000000000001" "new:91.2"
m 3 j 3
557 " previous: 556" "font-size at 0.1" "prior: 91.2" "new:91.3"
m 3 j 4
557 " previous: 557" "font-size at 0.1" "prior: 91.30000000000001" "new:91.4"
m 3 j 5
558 " previous: 557" "font-size at 0.1" "prior: 91.4" "new:91.5"
m 3 j 6
559 " previous: 558" "font-size at 0.1" "prior: 91.5" "new:91.6"
m 3 j 7
559 " previous: 559" "font-size at 0.1" "prior: 91.60000000000001" "new:91.7"
m 3 j 8
560 " previous: 559" "font-size at 0.1" "prior: 91.7" "new:91.8"
560 " previous: 0" "word-spacing at 1" "prior: 0" "new:1"

Notice in the working case it tries 99, and then resizes back down. My maxwidth is 560px.