1160453 - Facebook-emojis are cut off in text-input-field, on Windows only, due to dependence on font metrics of ideographic space (U+3000)

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Elbart]

Attachment: fb.png

When writing a message in Facebook, emoticons like ':(' are automatically replaced by the respective icon.

In Firefox on Windows, these icons are cut off on the side.
Disabling HWA or using safemode don't help.

In Chrome and IE they're fine, also in Firefox on Ubuntu.

Comment 1

[Timothy Nikkel (:tnikkel)]

Is this a regression? (I don't see it on mac).

Comment 2

[Elbart]

(In reply to Timothy Nikkel (:tn) from comment #1)
> Is this a regression? (I don't see it on mac).
First Nightly I can reproduce it in is 2012-06-05.

Last good revision: dd6ec482a85d (2012-06-04)
First bad revision: a7a905fd70d5 (2012-06-05)
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=dd6ec482a85d&tochange=a7a905fd70d5

Comment 3

[Timothy Nikkel (:tnikkel)]

Nothing in that range stands out.

I can reproduce the problem on Windows though.

Comment 4

[Elbart]

(In reply to Timothy Nikkel (:tn) from comment #3)
> Nothing in that range stands out.
Not regarding the underlying bug, but in that range is the change which made the bug "work" with Facebook.

Before that Nightly, the automatic replacement of the emoticon doesn't work for me. Maybe 
> Bug 727834 - Add an API to (re)parse a style sheet in place. r=bz

Comment 5

[Timothy Nikkel (:tnikkel)]

Ah. That makes sense then.

It seems likely that a change to facebook is involved (either triggering a firefox bug, or a problem in facebbok).

I think a reduced testcase might be useful.

Comment 6

[Paul Pasca[Away. Please needinfo? Paul Oiegas [:pauloiegasSV]]]

I've managed to reproduce this on the latest release(44.0.2) and latest Nightly(47.0a1).

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160210153822

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160211075855

The test case is very simple:
1. go to Facebook and comment on a photo
2. input an emoticon, e.g. ;)
3. press space and input another emoticon(or the same one), e.g. ;) ;)
4. see how the emoticon icon is cut out(as seen in the reporter's attachment)

Comment 7

[Daniel Holbert [:dholbert]]

I can't reproduce, in yesterday's Nightly 47.0a1 (2016-02-10) on Linux, FWIW. So there must be some other factor here -- possibly even Facebook doing "a/b" testing and sending us different content.

(Also: I'm adding back "testcase-wanted" keyword -- a reduced, bugzilla-hosted testcase is still extremely useful, even if we have reliable steps to reproduce at some external site).

Comment 8

[Daniel Holbert [:dholbert]]

(Oh, sorry -- I now see comment 0 noting that Firefox-on-Ubuntu is known-working. So the other factor is OS, I suppose. I'll tag my comment 7 as obsolete, since it's not adding new information.)

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So I think this is a Facebook bug.  They're making assumptions about the sizes of an ideographic space (U+3000) in the current font, and constructing the emoji character as the background on a span (with padding) around an ideographic space.  This ends up depending on what font we pick to display the ideographic space.

They'd be better off using display:inline-block and just setting the size they want.

The CSS being sent is slightly different to Linux vs. Windows Firefox, but I don't think the CSS differences actually matter (I think they're related to using different icon sets for different platforms, and some of those icon sets supporting High DPI displays.)

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: simple testcase (from Facebook's Linux icon set)

This happens to be simplified from the Linux CSS, but shows the bug on Windows.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: simple testcase (from Facebook's Windows icon set)

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'm going to move this to Tech Evangelism; hopefully we can find some contacts at Facebook who are willing to look into this.

For what it's worth, on Facebook Linux I see a pixel shaved off the top of the emoticon -- although I don't actually see that in the simplified testcase.  This is probably because I simplified the testcase too much to show that problem, since I stripped out the containing div that has overflow-x:hidden; overflow-y:auto.  But the problem on Windows with a substantial number of pixels shaved off the right is much more visible.

I think fixing this by using display:inline-block ought to be relatively straightforward on their end (particularly given that they're already using vertical-align: bottom, which means they're not worrying about baseline alignment), and they can then probably avoid using an ideographic space (which might slow things down by triggering additional font loads).

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(And on my Windows 10 laptop, the font used for the ideographic space is "MS PGothic".)

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

And, to be clear, my suggested fix was:
 * change display:inline on the span for the emoji to display:inline-block
 * set the height and width of that inline-block explicitly, and drop the padding (but keep vertical-align: bottom)
 * drop the ideographic space character (and perhaps also the extra spans inside of the emoji span)

Then again, it occurs to me that it may well be done the way it is now rather than with display:inline-block because there will be editing issues with cursor movement/positioning or backspace/delete when using inline-block.  In fact, if I implement my suggested fix by messing with the CSS in inspector, I do see a caret positioning issue when backspacing across the emoji (the caret overlaps the emoji when it should be at the right edge of it) or when right-arrowing across it.

So it's probably not that trivial to fix...

Comment 15

[Karl Dubost💡 :karlcow]

Contacted Facebook by email through our shared list.

Comment 16

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

An alternative fix might be to use a downloadable font (with known metrics) for that ideographic space character.

Comment 17

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I tested using the latest aurora (Fx 52.0a2, ID: 20161116004016) on Windows 10 x64, Windows 7 x64, Ubuntu 14.04 LTS  and  Mac OS X 10.11 and the emoji/emote icon in the comment section after a space becomes blank. However after the comment is posted, the icon/emoji is properly displayed.

The same regression range as in comment 2. The behavior of this issue may have changed.

Comment 18

[Iulia Cristescu, QA [:JuliaC] (away, please needinfo? [e-mail])]

The bug is not reproducible anymore on 51.0.1 build3 using Ubuntu 14.04 x86, Mac OS X 10.11, Windows 10 x64 and Windows 7 x64.

Comment 19

[Mike Taylor [:miketaylr]]

Thanks Iulia, let's close this as FIXED.