884816 - flickering in the start page

Status: VERIFIED FIXED

(support.mozilla.org :: General, defect)

Description

[yoshi yokotani]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0 (Beta/Release)
Build ID: 20130512194440

Steps to reproduce:

1. go to https://support.mozilla.org/en-US/home


Actual results:

the card for "thunderbird" in the start page flickers (jumps from the right bottom to the left bottom) In addition, the height of cards for "firefox" and "firefox OS" are temporarily shorter than that for "firefox for Android"


Expected results:

without flickering, the card for the "thunderbird" should be shown at the left bottom and heights of all the cards should be the same.

Comment 1

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

Was able to reproduce this. I think this may be normal but I may be wrong as well.

Comment 2

[Abhimithra Karthikeya]

I think its fixed now . Couldn't reproduce that .

Comment 3

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

(In reply to Abhimithra Karthikeya from comment #2)
> I think its fixed now . Couldn't reproduce that .
I was just able to reproduce again.
You have to look closely as the box moves from bottom right back to bottom left to be in place.

Comment 5

[Michael Cooper [:mythmon]]

This is because when the page is loaded, the cards (the white boxes), have an arbitrary height based on their content. We can't change that, because different languages have different content lengths. So when the page first loads, it looks like this:

 ------   -------   -------
|      | |       | |       |
|      | |       | |_______|
 ------  |       |
          -------


These boxes are arranged with the CSS rule `float: left`. Unfortunatly, when that is the case, and a second row happens, and the tallest box is not the first box, like in my drawing above, this happens:


 ------   -------   -------
|      | |       | |       |
|      | |       | |_______|
 ------  |       |
          -------   
                    -------
                   |       |
                   |       |
                    -------


Which is why the Thunderbird appears to the right. Shortly after the page loads, some JS runs that equalizes the height of all the cards, which makes the layout work correctly. The flicker is caused by the JS not running soon enough or fast enough, so the page renders once incorrectly and persists for a few milliseconds.

This was known when this feature was implemented, but considered to be a small enough visual problem that we could ignore it.

Possible fixes:

1. Leave it as is. This probably isn't a great idea, because it does look kind of tacky.

2. Give all boxes a fixed height. This is pretty bad too, because we either have to pick a height that makes some languages have a lot of white space, or forces other languages to not have enough room. It has the advantage of having no load-time JS layouting though.

3. Figure out how to make the rows fill from left to right at page load, but still fix the height with JS at runtime. I personally like this idea the best, but I'm not sure how it could be done. Hopefully :rdalal knows more than I about this. It will still result in a minor flicker, but it will be less intrusive.

This is probably a very small change, so I agree with :r1cky about it being 0pts, but also probably not a huge deal.

Comment 6

[Kadir Topal [:atopal]]

Okay, this was fun. Essentially, float doesn't work for this. As soon as an element is higher, the element in the next line will be floated against it, and in this case push it to the right side. It's even worse when you add another element, because the Thunderbird element is already completely against the right side of the box the next element has to break into the next line. That looks like this: http://note.io/16Hbo4a

Luckily there is the "display: inline-block" feature, which is awesome  cases like this. It achieves exactly what is needed here. As luck would have it, Ryan Doherty has written a great article about that on Mozilla Hacks: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ And even better: In the 4 years since that was written, it has become much more usable, all major browsers, including IE since version 8, have good support for it.

pull request:
https://github.com/mozilla/kitsune/pull/1493

Comment 7

[Ricky Rosario [:rrosario, :r1cky]]

Landed on master:
https://github.com/mozilla/kitsune/commit/50c472abbd82d328da297346a3ed20f917fabf78

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

Deployed to prod now. Thanks Kadir!

Comment 9

[Scoobidiver (away)]

The box height flickering is still not fixed.

Comment 10

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to Scoobidiver from comment #9)
> The box height flickering is still not fixed.

The heights will still flicker because js adjusts them, but they shouldn't move from right to left anymore.

Comment 11

[Kadir Topal [:atopal]]

Hmm, I thought about this a bit more, it's kinda jarring to see the boxes change after page load. As Ricky said, there is no way to give them an equal height without JS, since we don't know the necessary height upfront. 

However, we can say that the boxes look good with a height of 156px even if they have only one or two lines of text in them. And indeed they do. That should reduce the changing of height to an edge case.

This is purely as a result of my OCD, but if it helps others feel less weird stuff is happening:

https://github.com/mozilla/kitsune/pull/1495

Comment 12

[Ricky Rosario [:rrosario, :r1cky]]

Landed that: https://github.com/mozilla/kitsune/commit/2c66d4f34b35c87d7c1b73bbdb790e640346185c


Thanks!

Comment 13

[wojciech]

[bugday-20140305]  Verified on browsers (release and beta), Win7 64bit.

Comment 14

[Ricky Rosario [:rrosario, :r1cky]]

per comment 13