If any characters have overhangs that extend over the left or right sides of .vector-sticky-header-context-bar-primary, these overhangs will be clipped.
Here's some example enwiki titles where this is a problem:
Description
Description
Details
Details
Related Changes in Gerrit:
Related Objects
Related Objects
- Mentioned In
- T414993: Vector TOC in Sticky header is styled incorrectly and empty when changing viewports
T371654: Cut-off characters or letters in cursive/italic when left side menu is visible in Vector 2022
T365893: Italicized page titles are clipped in V22 - Mentioned Here
- T415932: [regression] Page title in Vector 2022 sticky header displays in mixed fonts and with weird spacing around the colon on non-main namespaces
T371654: Cut-off characters or letters in cursive/italic when left side menu is visible in Vector 2022
T350670: [Regression] Wikipedia Portal: Sites Missing in the List
Event Timeline
There are a very large number of changes, so older changes are hidden. Show Older Changes
Comment Actions
@ovasileva we moved this out of todo for now as we felt other tasks were of higher priority and given this was limited to logged in viewers on certain pages. Happy to renegotiate if you think this is higher priority than anything we selected.
Comment Actions
Some fun CSS trivia:
Painting effects that overflow the content but do not participate in the CSS box model do not affect layout. This type of overflow is also known as ink overflow. Examples of ink overflows include box shadows, border images, text decoration, overhanging glyphs, and outlines. Ink overflows do not extend the scrollable overflow region.
— MDN - CSS overflow
It looks like this behaviour is expected when something like overflow: hidden is placed on the text, which is somewhat confusing because overflow is required for us to use text-overflow: ellipses.
If we're feeling adventurous we can look into switching to -webkit-line-clamp to see if that fixes the issue.
Comment Actions
Lowered to medium (as we think the other tasks in normal priority are more important to fix) and moved out to incoming in favor of T350670 as we're not 100% sure this is fixable and we don't have the bandwidth to do both.
Comment Actions
Per the web team's quarterly grooming, these tasks are being removed from the team's backlog.
Comment Actions
Change #1220395 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):
[mediawiki/skins/Vector@master] Avoid clipping letters with wide kerns in sticky header
Comment Actions
Test wiki created on Patch demo by Matma Rex using patch(es) linked to this task:
https://cb75693335.catalyst.wmcloud.org/wiki/f
Comment Actions
After:
Before:
After:
The problem was caused by CSS rules that apply ellipsis to long titles. I verified that my patch does not cause any regressions in that:
Comment Actions
Change #1220395 merged by jenkins-bot:
[mediawiki/skins/Vector@master] styles: Avoid clipping letters with wide kerns in sticky header
Comment Actions
No issues found in patchdemo or betalabs; needs to be re-checked in production wmf.10 - when https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1220395 will be deployed.
Re-checked (https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1220395 is in wmf.10) - the fix is in place:
{F71485029}
Comment Actions
the fix causes another visual issue, as observed on enwikt (Module:data tables as an example):
Comment Actions
@ekrem please open a new bug ticket on https://phabricator.wikimedia.org/maniphest/task/edit/form/43/ using the form (I'm not entirely sure what issue you are describing with that page)
In general please don't reopen tickets for new issues, as due to Phabricator's workflow it tends to slow us down with the appropriate fix.
Comment Actions
The fonts are obviously wrong. I filed T415932 for this. I don't think it's a regression from this change, though.
Comment Actions
Change #1236781 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):
[mediawiki/skins/Vector@master] Fix sticky header TOC spacing and overflow
Comment Actions
Change #1236781 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Fix sticky header TOC spacing and overflow
Comment Actions
Test wiki on Patch demo by Matma Rex using patch(es) linked to this task was deleted: