Page MenuHomePhabricator

Links to sections in an article will land behind unscrollable header
Open, Needs TriagePublic

Description

Steps to reproduce:

  1. Open an article with TOC.
  2. Click the first link in TOC.

Expected:
The first headline is visible just below the header.

Actual:
The first headline is covered by the header.

I see that there is a ::before element that tries to prevent this, but it doesn't seem to work. In the screenshot, the headline is highlighted, the wide block is the ::before, the narrow block the headline itself (i.e. the span with the id).

Event Timeline

Schnark created this task.Nov 28 2017, 10:30 AM

Same problem when jumping to <ref>s.

This seems to be caused by the fact that the :target element is an inline element, not a block element. Setting display: block works, but of course breaks the layout. An alternative is perhaps :target {display: contents;} which works for me, but isn't widely supported yet: https://caniuse.com/#search=contents

Ignore my comment about display: contents, I was tricked into thinking it works, but it doesn't.

Evad37 added a subscriber: Evad37.Jun 14 2018, 12:49 AM

Some CSS that might work for headings at least: (h3 headings, but could be generalised for all heading levels)

#mw-content-text h3 {
    margin-top: 4.5em;
    margin-bottom: -3em;
}

#mw-content-text h3 > span.mw-headline {
    position: relative;
    top: -3em;
    padding-top: 3em;
}

#mw-content-text h3 > span.mw-editsection {
    position: relative;
    top: -4.3em;
}

Needs further investigation, because scripts/gadgets sometimes add extra stuff into the headings, and for cross-browser compatibility (so far only tested in Chrome on Windows 7)

Change 476388 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Add offset for # links to work around fixed header on desktop

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

Isarra closed this task as Resolved.Nov 28 2018, 10:22 PM
Isarra claimed this task.

Change 476388 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Add offset for # links to work around fixed header on desktop

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

Isarra reopened this task as Open.Jan 18 2019, 9:32 PM
Isarra removed a project: Patch-For-Review.

It's BAAAAAACK. And possibly wasn't even entirely resolved to begin with this time either. Something about it only working the first time, and then any subsequent anchor would wind up positioned wrong anyway.

Quite possibly the most annoying issue I've encountered.

@Isarra Have you tried copying what Wikia/FANDOM does? It seems they have a ::before pseudo-element attached to a <header> element, similar to what was apparently tried here but it actually works for them. Can you see what is different between what they do and what was tried here?

I have tried everything. This is me screaming in my corner because even the things that seem to work inevitably quit working anyway in a week or two.

Perhaps it is indeed time to move onto the truly insane 'implement iframes in flexbox' idea...

...can I just kill the sticky header? This thing is just the worst.

Izno added a comment.Apr 18 2019, 9:44 PM

I like it, but I think I'd also like it gone because having to look behind it drives me nuts. =)

Izno added a comment.Apr 18 2019, 9:46 PM
This comment was removed by Izno.
Jc86035 added a comment.EditedApr 19 2019, 7:01 AM

Would it be easier (relatively speaking) to make the header come down when the user scrolls up or moves their cursor up to the top (and maybe on mobile, if a touch event is registered at the top of the screen and no links are clicked)?

Ltrlg added a subscriber: Ltrlg.Apr 19 2019, 8:02 AM

Such a behavior is acceptable on mobile due to the lack of space, but
really annoying on desktop…

Isarra moved this task from Backlog to Aaaaaaaa on the Timeless board.Jun 19 2019, 8:58 PM