Last Comment Bug 715515 - Facebook Touch & Optimized Mobile Facebook styling drop-downs for Friend Requests, Messages and Notifications is bad in Gecko
: Facebook Touch & Optimized Mobile Facebook styling drop-downs for Friend Requ...
Status: VERIFIED FIXED
[topapps][webkitcss]
:
Product: Tech Evangelism
Classification: Other
Component: Mobile (show other bugs)
: unspecified
: ARM Android
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
:
Mentors:
: 749153 754629 754790 806444 (view as bug list)
Depends on: 497995 713643
Blocks: 759986
  Show dependency treegraph
 
Reported: 2012-01-05 08:16 PST by Aaron Train [:aaronmt]
Modified: 2014-05-07 23:51 PDT (History)
17 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
+


Attachments
Nightly (01/05) - touch.facebook.com screenshot (77.51 KB, image/png)
2012-01-05 08:16 PST, Aaron Train [:aaronmt]
no flags Details
Testcase (7.36 KB, text/html)
2012-04-05 16:27 PDT, Wesley Johnston (:wesj)
no flags Details

Description Aaron Train [:aaronmt] 2012-01-05 08:16:05 PST
Created attachment 586094 [details]
Nightly (01/05) - touch.facebook.com screenshot

See screenshot attached.

--
Samsung Galaxy SII (Android 2.3.4) & Nexus S (Android 4.0.3)
Mozilla/5.0 (Android; Linux armv7l; rv:12.0a1) Gecko/20120105 Firefox/12.0a1 Fennec/12.0a1
Comment 1 Jason Smith [:jsmith] 2012-04-05 09:26:56 PDT
Note - This also applies to m.facebook.com as well with the UA changed.
Comment 2 Jason Smith [:jsmith] 2012-04-05 11:07:24 PDT
The key underlying issue is that -webkit-border-image is being used. -moz-border-image needs to be used by facebook.
Comment 3 Jason Smith [:jsmith] 2012-04-05 11:23:36 PDT
Actually correct comment 2 - -border-image should be used.
Comment 4 Jet Villegas (:jet) 2012-04-05 11:46:10 PDT
Can we get a link to the offending CSS file? My quick scan of touch.facebook.com indicates that -moz-border-image does appear to be used in their CSS:

http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/pRPZDReheke.css
Comment 5 Jason Smith [:jsmith] 2012-04-05 11:55:08 PDT
https://s-static.ak.fbcdn.net/rsrc.php/v1/yS/r/0vvXP_gz7Sd.css
Comment 6 Jason Smith [:jsmith] 2012-04-05 11:58:08 PDT
Note - comment 5 references m.facebook.com's css source.
Comment 7 Jason Smith [:jsmith] 2012-04-05 12:06:58 PDT
Note comment 5 refers to m.facebook.com.
Comment 8 Wesley Johnston (:wesj) 2012-04-05 12:16:18 PDT
Strange... If I spoof Fennec Native on desktop, everything looks fine. If I spoof Android, I get the missing images. On my device with Fennec (no phony) I get the missing images as well.... I wonder if they're keying off of something else?
Comment 9 Jason Smith [:jsmith] 2012-04-05 16:23:05 PDT
On desktop firefox, switched the UA to fennec native, got this css link for touch.facebook.com https://s-static.ak.fbcdn.net/rsrc.php/v1/yr/r/D4PKpv2U8lb.css. Looks like they dynamically are choosing what CSS files to use...
Comment 10 Jason Smith [:jsmith] 2012-04-05 16:25:06 PDT
Note that for comment 9, moz-border-image is being used, same as what Jet said in comment 4.
Comment 11 Wesley Johnston (:wesj) 2012-04-05 16:27:03 PDT
Created attachment 612738 [details]
Testcase

I think this is a Fennec bug. border-image does not seem to work there? The first case here is what facebook is doing. Essentially:

.jewel .flyout:after {
  border-image: url(...) 49 28 29 28;
  border-width: 49px 28px 29px;
  ... other stuff
}

But even if I simplify that down to just a

div {
  border-image: url(dataurl);
}

it is not working in Fennec.
Comment 12 Jason Smith [:jsmith] 2012-04-05 16:28:46 PDT
Wesley, you are right. This is definitely a problem on our end. Just checked on Firefox vs. Chrome.
Comment 13 Wesley Johnston (:wesj) 2012-04-05 16:35:44 PDT
Ahh, and according to dbaron this is because in nightly we've changed our parsing of border image to better match the spec (I was comparing release firefox and nightly fennec).
Comment 14 Jason Smith [:jsmith] 2012-04-05 16:38:26 PDT
As a general note for future reference on facebook - They appear to be dynamically generating their CSS by the user agent to minimize dead code in CSS. Likely my guess to capture any additional issues will require utilizing the moz-specific CSS code for facebook.com. Switching the UA to capture the issues will not work.
Comment 15 Wesley Johnston (:wesj) 2012-04-05 17:21:47 PDT
I think the only fix needed here is for facebook to add border-style: solid; to these boxes. The spec has them default to border-style: none, which results in nothing being shown. Beyond that, I don't think there are any other compatibility things needed for the new syntax.
Comment 16 Jason Smith [:jsmith] 2012-04-05 17:52:35 PDT
(In reply to Wesley Johnston (:wesj) from comment #15)
> I think the only fix needed here is for facebook to add border-style: solid;
> to these boxes. The spec has them default to border-style: none, which
> results in nothing being shown. Beyond that, I don't think there are any
> other compatibility things needed for the new syntax.

In adding that CSS property, how would that affect other layout engines? Currently, this renders correctly on webkit.
Comment 17 Kevin Brosnan [:kbrosnan] 2012-04-26 13:17:17 PDT
*** Bug 749153 has been marked as a duplicate of this bug. ***
Comment 18 :Ehsan Akhgari 2012-04-26 13:22:06 PDT
Has anybody contacted Facebook about this?
Comment 19 Wesley Johnston (:wesj) 2012-04-26 13:23:13 PDT
Yes. They're working on it.
Comment 20 Lawrence Mandel [:lmandel] (use needinfo) 2012-05-03 19:27:46 PDT
Given the most recent comments I understand this to be a Facebook specific issue. We won't block on site specific issues.
Comment 21 Jason Smith [:jsmith] 2012-05-03 20:03:53 PDT
In disagreement, as bug 747123 does indicate that UA sniffing is part of a k9o user story. We need to discuss this to agree on what is and isn't a k9o blocker then, cause I don't think there is in general agreement on what we would or would not block on.
Comment 22 Jason Smith [:jsmith] 2012-05-03 22:41:41 PDT
Update to comment 21 - This is a bug in relation to webkit-specific properties being used on a gecko site, as now, facebook does give us the right site, but with problems with webkit prefixes being used. Facebook is also the #2 site on alexa and a top app. This is related to mobile web compatibility k9o user story, so nominating for k9o.
Comment 23 Jason Smith [:jsmith] 2012-05-05 15:33:00 PDT
Re-nominating for kilimanjaro. This isn't a webkit-specific issue, but this is related to bug 497995 and bug 713643. Same underlying issue as Lord of Ultima and Command and Conquer (border-style: solid being required).
Comment 24 Kevin Brosnan [:kbrosnan] 2012-05-12 21:38:26 PDT
*** Bug 754629 has been marked as a duplicate of this bug. ***
Comment 25 Aaron Train [:aaronmt] 2012-05-14 06:34:45 PDT
*** Bug 754790 has been marked as a duplicate of this bug. ***
Comment 26 Jason Smith [:jsmith] 2012-07-13 17:02:49 PDT
Still can reproduce this bug on the current Nightly.
Comment 27 Lawrence Mandel [:lmandel] (use needinfo) 2012-08-19 20:15:51 PDT
I can still reproduce on current Nightly. 

Chris - Was this issue passed on to Facebook? Any update on a timeline for a fix?
Comment 28 Aaron Train [:aaronmt] 2012-10-29 12:30:18 PDT
*** Bug 806444 has been marked as a duplicate of this bug. ***
Comment 29 Dão Gottwald [:dao] 2012-10-30 18:01:39 PDT
This is finally fixed.
Comment 30 Jason Smith [:jsmith] 2012-10-30 18:03:08 PDT
Indeed it is!

Note You need to log in before you can comment on or make changes to this bug.