(Bug report) Modal and popup backgrounds not rendering correctly in Firefox 114.0.2

[Ahrotahntee]

Trilium Version

0.60.4

What operating system are you using?

Other Linux

What is your setup?

Server access only

Operating System Version

Linux ahrotahntee-riven 6.3.9-arch1-1 #1 SMP PREEMPT_DYNAMIC Wed, 21 Jun 2023 20:46:20 +0000 x86_64 GNU/Linux

Description

After upgrading to 0.60.4, some CSS aspects are not being rendered correctly. Modals and popups appear without any background color or with inappropriate alpha values. Investigation using the browser's developer console suggests that the CSS variables are not functioning correctly

This behavior is only apparently in Firefox 114.0.2 as Chrome 114.0.5735.198 renders normally.

Further investigation suggests its related to the var(var()) nesting, as the only two instances I could find of it seem to be affected. I have applied this CSS in an #appCss note and it appears to work around the issue.

div.tooltip-inner, div.modal-content {
  background-color: #333 !important;   
}

body.heading-style-underline .note-detail-editable-text h2,
body.heading-style-underline .note-detail-editable-text h3,
body.heading-style-underline .note-detail-editable-text h4 {
  border-bottom: 1px solid #aaa !important;
}

Error logs

No errors are present in the server console, nor the browser console.

[zadam]

Hi, it looks like you have a custom theme. Could you try with the builtin ones - e.g. Dark?

[Ahrotahntee]

I am using the built-in dark theme, just have an #appCss note to work around the issue.

[zadam]

Hmm, I don't have this problem on firefox 114.0.1:

Are you sure the problem is not caused by the #appCss?

[Ahrotahntee]

I hadn't added the appCss until I had the problem, but after removing it the problem is no longer persistent. This can be closed.