Page MenuHomePhabricator

CX2: Avoid sticky header gap on top that shows the content behind it
Closed, ResolvedPublic

Description

As part of the rearrangement of the translation editor headers (T186874), the header where the publish button is, was made sticky. However, there seems to be a 2px gap on top that shows the content behind the header to be visible, causing unnecessary distraction.

The expected behaviour would be for the sticky header to reach the top edge of the viewport, so no gap is visible.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 15 2018, 8:39 AM
Pginer-WMF triaged this task as Normal priority.Mar 15 2018, 8:40 AM
Pginer-WMF moved this task from Backlog to Priority backlog on the Language-2018-Jan-Mar board.
Pginer-WMF lowered the priority of this task from Normal to Low.

Change 419822 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Remove gap on sticky translation header

https://gerrit.wikimedia.org/r/419822

This seems like a bug on webkit based browsers. Firefox was not suffering from flickering (solved by @santhosh in this patch) or from this gap.

Change 419822 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Remove gap on sticky translation header

https://gerrit.wikimedia.org/r/419822

Change 421015 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Reduce gap correction on sticky translation header

https://gerrit.wikimedia.org/r/421015

Although this ticket suggested there is 2px offset from the top, and patch to move header 2px up is merged, I have observed that "All translations" button shows 2px correction on webkit browsers is too much and 1px is sufficient. Here are shots, where you can see that correcting by 2px cuts off part of "All translations" button focus border.

2px correction1px correction

Change 421015 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Reduce gap correction on sticky translation header

https://gerrit.wikimedia.org/r/421015

Checked the fix in cx2-testing

Etonkovidova moved this task from QA to Done on the Language-2018-Jan-Mar board.Mar 23 2018, 7:33 PM

Checked the fix in cx2-testing

Does this mean ticket should be resolved?
Note that this problem was appearing on webkit browsers (like Chrome) and wasn't affecting all the browsers.

Pginer-WMF closed this task as Resolved.Mar 26 2018, 8:43 AM

@Petar.petkovic - yes, it's Resolved (I thought that moving to Done will mark it as such). With UI issues I usually do a quick check on different browsers (and on Windows too).