Fixed header overlapping when opening links for code specific lines

Question

Fixed header overlapping when opening links for code specific lines

jetersen opened this issue 7 years ago · comments

The header has starting overlapping code changes when opening links.
https://github.com/casz/fastlane/blob/9b7ebab16ebbace1178fc6f6d1f1b232372e5419/fastlane/lib/fastlane/actions/set_info_plist_map.rb#L12-L15

With fixed header on

With fixed header off

Don't recall it being a issue, hence this issue was created.

Rob Garrison · Answer 1 · Fri Oct 06 2017 06:27:02 GMT+0800 (China Standard Time)

Hi @Casz!

Please make sure you have v1.1.15 of the style installed. The current version doesn't have this issue, so I would have to guess you might still be using Stylish because it hasn't been updating styles properly. I would recommend you switch to Stylus.

Joseph Petersen · Answer 2 · Fri Oct 06 2017 06:29:40 GMT+0800 (China Standard Time)

Before reporting I verified it was updated, already using Stylus

/*! Github Fixed Header Theme v1.1.15 (9/2/2017) *//*
 * https://github.com/StylishThemes/GitHub-FixedHeader
 * https://userstyles.org/styles/124438
 * License: https://creativecommons.org/licenses/by-sa/4.0/
 */

Google Chrome is up to date
Version 61.0.3163.100 (Official Build) (64-bit)

Joseph Petersen · Answer 3 · Fri Oct 06 2017 06:31:27 GMT+0800 (China Standard Time)

Perhaps it's combination of refined github and fixed header?

Rob Garrison · Answer 4 · Fri Oct 06 2017 06:35:54 GMT+0800 (China Standard Time)

Oh wait, you're right... I misunderstood you. I'll have to take a closer look later tonight.

Joseph Petersen · Answer 5 · Fri Oct 06 2017 06:39:28 GMT+0800 (China Standard Time)

Updated screenshots to show it better 👍

Must be a change Github made, I recall they opened all links with few lines above the specific code line that was referenced on the link.

Rob Garrison · Answer 6 · Fri Oct 06 2017 11:00:40 GMT+0800 (China Standard Time)

Hmm, well it looks like GitHub looks for at the hash #L12-L15, then looks for the table cell that has an id of "LC12" (in this case) and then uses scrollIntoView to set the top.

<tr>
  <td id="L12" class="blob-num js-line-number" data-line-number="12"></td>
  <td id="LC12" class="blob-code blob-code-inner js-file-line highlighted">...</td>
</tr>

I've tried various (CSS only) methods to get it to move, but nothing is working so far 😿

Reposition code cell pseudo element

.blob-code-inner:after {
  content: " ";
  position: absolute !important;
  top: -60px !important;
  left: 0 !important;
  pointer-events: none;
}

Tweak code cell pseudo element (moves copy button up)

.blob-code-inner:after {
  content: " ";
  position: absolute !important;
  padding-top: 60px !important;
  margin-top: -60px !important;
  pointer-events: none;
}

Last resort: tweak line numbers

.blob-num:after {
  content: " ";
  display: inline-block !important;
  position: relative !important;
  padding-top: 60px !important;
  margin-top: -60px !important;
  width: 1px !important;
}

I think this one is going to require a javascript solution; otherwise I'm out of ideas. Any thoughts @silverwind?

Joseph Petersen · Answer 7 · Mon Apr 02 2018 17:19:33 GMT+0800 (China Standard Time)

@Mottie seems you fixed it? At least I seen something make it jump back up :)

Easiest to see with one line links: https://github.com/casz/fastlane/blob/9b7ebab16ebbace1178fc6f6d1f1b232372e5419/fastlane/lib/fastlane/actions/set_info_plist_map.rb#L12

0ri0n ☠ · Answer 8 · Mon Apr 02 2018 20:10:26 GMT+0800 (China Standard Time)

Hmm, still not working for me with v1.2.0, it's still overlapping the specified line number.

Rob Garrison · Answer 9 · Mon Apr 02 2018 21:23:50 GMT+0800 (China Standard Time)

It hasn't been fixed.

If you click on a line to select it, the line jumps to the top, but under the fixed header! 🎉

But, if you click a link, like the one @Casz shared, the selected line will be under the fixed header. 😿

Rob Garrison · Answer 10 · Mon Apr 02 2018 21:40:16 GMT+0800 (China Standard Time)

You'll also notice that if you toggle the code wrap (via userscript), the selected line button position won't be accurate any more. Also, I thought I fixed the selected line button so it was no longer being half hidden... I'll look again when I have time.

Anyway, go to https://github.com/StylishThemes/GitHub-Dark/blob/master/github-dark.user.css#L13 and you'll see the selected line (under the fixed header) button position move from line 13 to 27 if you click the toggle code button added by either GitHub Dark script or the Code wrap toggle userscript.

Joseph Petersen · Answer 11 · Mon Apr 02 2018 23:41:14 GMT+0800 (China Standard Time)

Well for me it lands on line 10 being out of view while 12 is definitely in view.... I don't what Voodoo is doing it :) However it actually lands on 12 being out of view but then very rapidly it scrolls into view once again.

the-j0k3r · Answer 12 · Fri Mar 01 2019 15:39:25 GMT+0800 (China Standard Time)

This is same issue as StylishThemes/GitHub-Dark#598 Back when we had this fixed header portion built into GHD. Thankfully its gone now.

In short, We never managed to get an acceptable solution that works in most usual circumstances and its was like a wack a mole game, So I dont thinks its possible anyway to fix related issue fully after many hours of banging head on this and trying all sorts, I thought Id share with you guys, =) good luck though.