Related to T181167: Slight conflict between 2017 WTE and Timeless top-bars?

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.

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

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

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.

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

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)?

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

Change 529419 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Fix fixed header scroll offset in supported browsers

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

Change 529419 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Fix fixed header scroll offset in supported browsers

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

All right, fixed in firefox and chrome. Do we care about anything else?

According to https://caniuse.com/#feat=css-snappoints this should also work in Safari (which I didn't test), and it will work in Edge once they switch to Blink.