817372 - news feed item actions bar (like, comment, share) on facebook's touch interface are not placed on one line

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Mathieu Pellerin]

Attachment: screenshot of issue

Not so long ago, Facebook updated it's web touch / mobile interface (touch.facebook.com).

One CSS change has regressed the rendering of the news feed item's actions bar (the like, comment, share). Instead of having each action placed next to each other on a single line, each action end up on its own line.

On webkit browsers, all of the actions are rightfully placed on one line. A screenshot attached to this bug will probably do better than words in showing the bug.

Looking at the HTML/CSS side of things, the actions are <div> placed in one parent <div> container.

The parent <div> container:
 display: -moz-box;
 -moz-box-orient: horizontal;
 -moz-box-pack: justify;
 -moz-box-align: center;

An action <div>:
 display: inline;
 -moz-box-sizing: border-box;
 -moz-box-flex: 1;

The problem is caused by the "display:inline;" style rule of the action <div>. If you remove this declaration, all of the action <div>s are placed on one line next to each other.

Not sure whether this is an evangelism problem, or whether gecko should change its behavior. I'll let the mozilla gurus decide on this :) In the meantime, I'm filing this under layout.

Comment 1

[Mathieu Pellerin]

Not sure whether this bug was spotted by the facebook team, or it tried its touch interface with firefox android and witnessed the bug first-hand. Either way, it's fixed and now invalid.