Проблема с CSS в выделенном коде с Highlight.js
У моего личного сайта странная проблема с CSS, которая, похоже, возникает только на устройствах Android (она может возникать на других мобильных устройствах, но я не смог воспроизвести ее ни в одном из мобильных браузеров).
Он использует Highlight.js для подсветки синтаксиса, но я сам реализовал поддержку номеров строк. В браузерах Android любые строки кода после номера 62 подсвечиваются неправильно, и вместо этого этот раздел отображается пустым.
Исходный код находится по адресу https://github.com/matthewbdaly/matthewbdaly.github.io, в source
ветка. Проблема, кажется, в файле app/sass/_code.scss
и некоторое время назад я применил этот коммит к этому файлу, чтобы исправить переполнение, добавив overflow-x: initial
к hljs
Класс применил к коду Highlight.js, что решило эту проблему, но означало, что цвет фона соответствовал ширине видимой части подсветки синтаксиса, и если вы прокручивали его горизонтально, он явно имел другой цвет фона, поэтому я завелся, возвращая это.
Мои навыки CSS несколько пешеходные, и я не смог найти решение для этого. Есть идеи, как мне решить эту проблему?