1340545 - Vimeo's recommended titles are clipped

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Petruta Horea [:phorea], Desktop QA]

Attachment: screenshot of issue (see the clipped text at lower-right, next to "Ghastly" & "Kim and the Created")

[Affected versions]:
- Firefox 51
- Firefox 52 beta 7
- Aurora 53.0a2 2017-02-16
- Nightly 54.0a1 2017-02-17 

[Affected platforms]:
- Win 7 64-bit
- Mac OS X 10.11
- Ubuntu 14.04 64-bit

[Steps to reproduce]:
1. Open https://vimeo.com/ and pick a video to watch - The selected video is opened in a new tab (eg. https://vimeo.com/203885764)
2. Check the "More from Vimeo Staff Picks" section below the video, on the right side

[Expected result]:
- The recommended videos have the titles truncated

[Actual result]:
- Titles for the recommended videos are cut.
- On Google Chrome the title is shown on two rows (and it's truncated if longer than that).

[Regression range]:
- This regressed on Firefox 46, so the inbound builds are no longer available. This is the mozilla-central pushlog where nothing seems to stand out for this issue:

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=22f51211915bf7daff076180847a7140d35aa353&tochange=ce643acfab14d95bea2fb6c4f56477413514b686

Comment 1

[Mats Palmgren (inactive)]

The summary of this is a bit confusing since "truncated" usually means the same thing as "clipped".
I think the bug here is that the title is clipped.

Comment 2

[Mats Palmgren (inactive)]

If I toggle this declaration in devtools then the title isn't clipped.
(on the <a class="iris_link iris_link--gray-1" ...> element)

.contextclip-header--ellipsis {
    white-space: nowrap;
}

The site doesn't serve that rule to Chrome, which seems to be the reason
it's not clipped there.

It's a bit odd that it's a regression though, but if I look at
the parent element, the <h3>, it has:
.contextclip-header--ellipsis {
    display: block;
    display: -moz-box;
    display: -webkit-box;
...

and I see one -webkit-box related bug in the regression range: bug 1208344.

Comment 3

[Mats Palmgren (inactive)]

Oh, now I see what the problem is.  The regression range also has bug 1213126,
which enabled -webkit- prefixed properties by default.  So before that,
the above would have been a -moz-box thing instead which apparently we get
an text-overflow ellipsis for, which is now missing.  I'll try to make
a testcase for this...

Comment 4

[Mats Palmgren (inactive)]

Attachment: testcase

-webkit-box frame tree:

HTMLScroll(h3)(1)@7f3ff56c5940 {0,0,12000,1380}<
  FlexContainer(h3)(1)@7f3ff56c58c0 {0,0,12000,1380} vis-overflow=0,0,23580,1380<
    Block(h3)(1)@7f3ff5e8e348 {0,0,23580,1380} <
        Text(0)"Lemon Twigs \u2013 I Wanna Prove To You"@7f3ff5e8e478 {0,0,23580,1380}


-moz-box  frame tree:

XULScroll(h3)(1)@7f3fe6a28960 {0,1123,12000,1380} <
  Box(h3)(1)@7f3fe6a288c0 {0,0,23580,1380} <
    Block(h3)(1)@7f3fe6acd508 {0,0,12000,1380} vis-overflow=0,0,23580,1380 <
        Text(0)"Lemon Twigs \u2013 I Wanna Prove To You"@7f3fe6acd0c8 {0,0,23580,1380}

Comment 5

[Mats Palmgren (inactive)]

Not sure if we want to mess around with the sizing here...
Perhaps we should ask them kindly to remove the "white-space: nowrap" rule?
That's certainly better than just displaying a single line with a few
letters, even if you have an ellipsis.

Comment 6

[Daniel Holbert [:dholbert]]

Chrome renders the attached testcase the same way that we do (modulo slightly different word lengths due to different fonts). So I don't think we want to change our behavior here.

We should just ask Vimeo to serve us the same content they serve to Chrome here (right now they're serving us some extra CSS which causes clipping, per comment 2).

Adam, perhaps you could reach out to someone from Vimeo and ask about that?

Comment 7

[Karl Dubost💡 :karlcow]

I wonder if Andrew can help us.

Comment 8

[Mike Taylor [:miketaylr]]

We also have a mailing list with Vimeo, might as well bring it up there.

Comment 9

[Adam Stevenson [:adamopenweb]]

Contacted them via mailing list.

Comment 10

[Gerry Chang [:gchang]]

We don't have the plan to have dot release for 51. Mark 51 won't fix.

Comment 11

[Adam Stevenson [:adamopenweb]]

Just following up, this issue still exists in Firefox 55 for OSX.

Sent another email to Vimeo, seeing if we can get an update.

Comment 12

[Petruta Horea [:phorea], Desktop QA]

This is now fixed in Firefox 56 beta 11 across platforms.