1149073 - [UX] Transitioning the Font Size when changing Style in Reader View

Status: RESOLVED WONTFIX

(Firefox Graveyard :: Reading List, defect)

Description

[Markus Jaritz [:designakt] (UX)]

How about changing the font size also with a small transition?
Michael, what do you think?


To test add this css to aboutReader.css in Style Editor:
html{
   transition: font-size 0.3s linear;
}

Comment 1

[Michael Maslaney [:mmaslaney] ([e-mail])]

I believe Blake is working on this one. I think he is using:

transition: font-size: 0.4s ease-in

Comment 2

[Blake Winton (:bwinton) (:☕️)]

Yep, I've got a patch that I'll post when I get a chance…  :)

Comment 3

[Blake Winton (:bwinton) (:☕️)]

Attachment: The first cut at the patch.

There is a build with this enabled at https://dl.dropboxusercontent.com/u/2301433/Firefox/Reading/Transitions.dmg

Let me know if there's anything I can change to make the patch better!  :)

Comment 4

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 8585826 [details] [diff] [review]
The first cut at the patch.

Review of attachment 8585826 [details] [diff] [review]:
-----------------------------------------------------------------

So... code wise this is all good, but I'm really concerned about how this will perform on a reasonably sized article on a low-end machine (like the Asus T100 I've mentioned previously). In theory Gecko should automagically make it not awful, even if it's not perfect. But I'm going to hold off on r+ until that's been tested.

Comment 5

[Markus Jaritz [:designakt] (UX)]

I like that the font does not jump to a new size anymore. But waiting 0.4s to see if this is the right font size might feel long. How about 0.1s linear
0.1s is enough to see the animation, but still feel very quick. And liner might improve performance a little as no easing-curve needs to be calculated, and it is not noticeable on such a short transition.

Comment 6

[Blake Winton (:bwinton) (:☕️)]

Markus: I just asked the perf people, and they say that there's no difference between linear and ease-in-out.

Blair: I'm going to try to implement some of their suggestions on a NetBook, to see how janky the animation is, and will report back.

Comment 7

[Markus Jaritz [:designakt] (UX)]

Great. Thanks for checking. I couldn't find anything on a quick web-search. Then I am fine with both.

Comment 8

[Blake Winton (:bwinton) (:☕️)]

So, it's really pretty janky on the netbook I tested on.  Like, "3 frames of animation over the .4 seconds" kind of jank.  Mostly because we're re-flowing the entire page on every frame.  So the recommendation from both them and I is to not add this feature.

Would you mind marking the bug "WONTFIX", Markus?

Comment 9

[Markus Jaritz [:designakt] (UX)]

Is it also bad with a shorter animation?

Comment 10

[Blake Winton (:bwinton) (:☕️)]

I think so, yeah.  At most we would get one frame of animation, and it doesn't start until after the next repaint after you click the button, so it seems slower and jankier than we want.  It's also fairly expensive to re-lay-out the entire page on each frame of the animation, which we would need to do because the text size is changing, and the line breaks are at different places…

Comment 11

[Markus Jaritz [:designakt] (UX)]

Got it.