Table layout causes diff and line highlight errors

[robertg042]

Hi, first of all, thanks for the awesome plugin!

While testing in IE and in modern webkit browsers, I discovered few issues. The common culprit seems to be usage of table layout and the fact that relative positioning of elements is not always respected in this layout.

1. In IE line hightlight is not displayed at all, because of custom variables, which I guess is ok. If you set regular background-color you'll find that grvsc-line::before pseudoelement is mispositioned:

2. In modern Chrome, Safari and Edge, however, position: relative on display: table-row on grvsc-line is not respected, which results in width: 100% applied to grvsc-line::before being equal to the width of grvsc-container and not grvsc-line. It causes problems with highlight beyond horizontal overflow:

Those styles seems to work as a workaround:

  .grvsc-code {
    position: relative;
    width: 100%;
  }
  .grvsc-line {
    position: static;
  }

Firefox has no issues:

Sources:

• [css-position][css-tables] position doesn’t apply on <tr> either w3c/csswg-drafts#1899
• https://bugs.chromium.org/p/chromium/issues/detail?id=417223
• https://stackoverflow.com/questions/8501727/table-row-wont-contain-elements-with-positionabsolute

[andrewbranch]

Hmm, you’re very correct... unfortunately, making .grvsc-code 100% wide when the code doesn’t take up the full width makes the gutter cells grow (they’re supposed to be flush left):

I’ll keep experimenting. Thanks for the heads up!

[robertg042]

Thanks for looking into the issue. I admit I haven't run the tests while testing my solution. It's just what works for me right now.

[andrewbranch]

I think CSS Grid might be a viable solution here. Not sure when I’ll have time to give it a try.