Properly align line numbers with code lines in Safari
What does this MR do?
For #32676 (closed)
This MR updates the vertical heights of the code view line numbers and source code lines to be based on rem values instead of inheriting a long cascade of em values.
This fixes some sub-pixel rounding inconsistencies in Safari while still allowing the sizes to scale with a user's preferential base font size.
Screenshots
Other than the Before column in Safari, this table should show consistent screenshots across all browsers and font sizes.
The Before => After difference on Safari indicates the fix is working.
The consistency in the rest of the table indicates that the fix is not breaking anything else.
Note that viewing files is not possible in IE11. The JS file load uses fetch (without a fallback) so it simply doesn't occur in IE.
| OS | Browser | Before | After | After with non-standard base font-size |
|---|---|---|---|---|
| Mac Catalina | Safari 13 |  |
 |
 |
| Mac Mojave | Safari 12.1 |  |
 |
 |
| Mac High Sierra | Safari 11.1 |  |
 |
 |
| Mac Sierra | Safari 10.1 |  |
 |
 |
| Ubuntu 19.10 | Chrome 80 |  |
 |
 |
| Ubuntu 19.10 | Firefox 73 |  |
 |
 |
| Windows 10 | Chrome 80 |  |
 |
 |
| Windows 10 | Chrome 79 |  |
 |
 |
| Windows 10 | Firefox 73 |  |
 |
 |
| Windows 10 | Firefox 72 |  |
 |
 |
| Windows 10 | Edge 79 |  |
 |
 |
| Windows 10 | Edge 18 |  |
 |
 |
| Windows 10 | IE 11 |
 (code never loads) |
-- | -- |
| Mac Catalina | Chrome 80 |  |
 |
 |
| Mac Catalina | Chrome 79 |  |
 |
 |
| Mac Catalina | Firefox 73 |  |
 |
 |
| Mac Catalina | Firefox 72 |  |
 |
 |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers and then some... -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
~~Label as security and @ mention @gitlab-com/gl-security/appsec~~ -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team