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

RESOLVED INVALID

Status

()

RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: nirvn.asia, Unassigned)

Tracking

Trunk
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
Created attachment 687499 [details]
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.
(Reporter)

Comment 1

6 years ago
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.
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.