Follow-up to T408046: the legacy parser styles for mobile StickyHeaders are missing an adjustment for scroll-margin-top which means the sticky header with the h2 can obscure the start of the section on a link to an h2-h6 header. Additionally, both legacy and parsoid modes produce the wrong scroll position for initial links at load time, and our adjustment was not applying to other elements like div or span with an id attribute.

Adding scroll-margin-top: @spacing-400 to [ id ] within .collapsible-block or the parsoid equivalent is needed but these positions are overridden anyway by pixel offsets in MobileFrontend. Overriding these bad scroll positions by adding a second event listener (for hashchange on window or the wikipage.content hook for initial view) seems to resolve it without any noticeable issues in Chrome or Safari.

Steps to reproduce:

• go to test page (contents below) with ?stickyHeaders=1&debug=1&useparsoid=0
• click the "Heading 4b" link on the indented links at top
• open the "Heading 4b" link in a new tab/window
• click the "Para 4b" link on the indented links at top
• open the "Para 4b" link in a new tab/window

Expected results:

• after scrolling, "Heading 2b" is at top followed by "Heading 4b" or "Para 4b" respectively

Actual results:

• after scrolling, "Heading 2b" is at top but the expected "Heading 4b" or "Para 4b" are obscured under it

The heading works as expected with useparsoid=1 on the Parsoid styles but the paragraph does not.

Test page: link

QA notes

Testing live master on beta:

1. Open in new window: legacy parser, with heading fragment
   1. Ensure that "Vocalization" is visible underneath the sticky "Biology"
   2. Scroll back to top and follow the test link back to "#Vocalization"
   3. Ensure that "Vocalization" is again visible underneath the sticky "Biology"
   4. Close the "Biology" section
   5. Scroll back to top and follow the test link back to "#Vocalization"
   6. Ensure that "Vocalization" is again visible underneath the sticky "Biology"
2. Open in new window: legacy parser, with span fragment
   1. Ensure that "...barking[2][17]" is visible underneath the sticky "Biology"
   2. Scroll back to top and follow the test link back to "#cite_ref-Lloyd1980_2-9"
   3. Ensure that "...barking[2][17]" is visible underneath the sticky "Biology" again
   4. Close the "Biology" section
   5. Scroll back to top and follow the test link back to "#cite_ref-Lloyd1980_2-9"
   6. Ensure that "...barking[2][17]" is visible underneath the sticky "Biology" again
3. Open in new window: parsoid, with heading fragment
   1. Ensure that "Vocalization" is visible underneath the sticky "Biology"
   2. Scroll back to top and follow the test link back to "Vocalization"
   3. Ensure that "Vocalization" is again visible underneath the sticky "Biology"
   4. Close the "Biology" section
   5. Scroll back to top and follow the test link back to "Vocalization"
   6. Ensure that "Vocalization" is again visible underneath the sticky "Biology"
4. Open in new window: parsoid, with span fragment
   1. Ensure that "...barking[2][17]" is visible underneath the sticky "Biology"
   2. Scroll back to top and follow the test link back to "#cite_ref-Lloyd1980_2-9"
   3. Ensure that "...barking[2][17]" is visible underneath the sticky "Biology" again
   4. Close the "Biology" section
   5. Scroll back to top and follow the test link back to "#cite_ref-Lloyd1980_2-9"
   6. Ensure that "...barking[2][17]" is visible underneath the sticky "Biology" again