Мой личный сайт имеет странную проблему с 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 несколько пешеходные, и я не смог найти решение для этого.Есть идеи, как мне решить эту проблему?