1425207 - LinkedIn Influencer tag doesn't appear on specific languages in the article page when you are logged in

Status: NEW

(Core :: Layout, defect, P3)

Description

[Cristina Badescu [:cbadescu], Experiments QA]

Attachment: Influencer Tag LinkedIn.gif

[Affected Platforms]:
- All Windows
- All Mac
- All Linux

[Prerequisites]:
- Have a valid LinkedIn account.
- Have a LinkedIn link to an article written by an influencer, eg. https://www.linkedin.com/pulse/greatest-pleasures-life-james-altucher/

[Steps to reproduce]:
1. Open Firefox browser with the profile from prerequisites and navigate to the LinkedIn article.
2. Sign in your LinkedIn account.
3. Change your account language (see the languages mentioned in notes).
4. Navigate again to the LinkedIn article link.
3. Observe the author's "influencer" tag.

[Expected result]:
- The author's "influencer" tag is displayed.

[Actual result]:
- "..." is displayed instead of the author's tag.

[Additional notes]:
- You may also encounter the following behavior: when you are not logged in the author's image also appears, but it disappears after login. I'm not sure if this is an issue.
- Attached is a screen recording with this issue.

Comment 1

[Jet Villegas (inactive)]

From the attached screen recording, it appears that the Romanian translation of "Influencer" ("Persoană influentă") exceeds the available width and is replaced by the ellipsis as specified in the site's CSS overflow setting.

Comment 2

[Cristina Badescu [:cbadescu], Experiments QA]

Hello,

I'm sorry but I haven't noticed I didn't include the notes, where I've mentioned what other languages are affected:

[Notes]:
- This issue is not reproducible when you are not logged in the LinkedIn account.
- This issue is not reproducible on Microsoft Edge, Chrome and Safari.
- This issue is reproducible for the following 10 languages: Bahasa Malaysia (Malay), Cestina (Czech), French, Corean, Chinese simplified, Japanese, Romanian, Russian, Thai and Turkish. The tag is truncated for Arabic language. 

Sorry again for this. Thank you :)

Comment 3

[Xidorn Quan [:xidorn] UTC+11]

Attachment: reduced testcase

So, the problem here is that the transparent text overflows the influencer badget, and causes the whole inline block to be truncated as an atomic element.

What Chrome and Safari do is that, they somehow make the inline block inherit the text-overflow, and do the ellipsis truncate inside the inline block.

I think Firefox's behavior is more conformant to the spec, so maybe this is more an evangelism bug? But I cannot tell for sure. (I think I responded to some bug related to this recently, but I failed to find it...)