KaTeX vectors have gray box (CSS collision)

Steps to reproduce

  1. Use “Dark” Theme
  2. Create Vector in KaTeX, i.e.: $$ \vec y $$

Expected result

Background stays #181818, Text stays #eee

Actual result

A rgba(255, 255, 255, 0.3) rectangle appears over the vector


Which operating system are you using? Solus 4, Linux 5.3
Which browser are you using? Chrome 87
If you’re using a desktop or mobile app, what’s the version number of Dynalist? –
Are you using any third-party scripts for Dynalist, e.g. PowerPack? –

Additional information

The overlay is created by KaTeX internally and has the class .overlay, which happens to be a common class name and is also used by dynalist itself (For me in theme_dark.css:65-67), where the color is applied.

I recommend renaming the .overlay class or adding an override rule for KaTeX environments.

Other issues suggest this is an issue with KaTeX itself, which i don’t think it is.

Additional comments

Love Dynalist, thanks for it!

Cheers :slight_smile:

Whoops, for some reason i couldn’t find the other reports about this before but now i see them. So it’s a duplicate and can be closed. ¯\_(ツ)_/¯

Similar: #4077, #4451

Thanks for hunting down the root cause! We’ll think of something to have it fixed.

I think this is fixed now, it doesn’t appear anymore for me, the .overlay class in theme_dark.css has been renamed to .full-screen-overlay. Thanks, y’all are awesome!

Tagging #4077, #4451 to be closed as well

Thanks for the update!