awaiting more feedback on 3 possible solutions in the description. we can decide which solution to pick based on effort and value.

moving it to needs analysis till then

@Nirzar :

CSS filters are not supported in IE <= 12 according to http://caniuse.com/css-filters/embed
Given the number of IE based mobile browsers, it might be acceptable to minimise this bug to all older browsers. We currently do support IE9 but in future that will change.

Solution 1 is the easiest and has the most widest support.

Solution 3 is really up to you and a choice of design (this is previously how they looked). Reusing drawer pattern does however simplify our codebase at the expense of some additional work now.

Your choice! All 3 would work but solution 1 has the least cons.

I was surprised to find mobile references drawer on black background. Not sure, what the reason behind it was, though have a strong preference towards solution #3.
Not only does it seem not as disconnected from rest of UI as the black ones, it also has quite some maintenance advantages over the others.
References drawer external links didn't show external link icon (usefulness of this is another topic), my guess isn't only for design, but also because it's icon wasn't supported on black background.

@Volker_E just for reference, the reason was to distinguish between normal page previews drawers on mobile (which we never shipped) and the reference drawer. so as to reduce confusion. but i don't think are have that problem anymore and it can solved with strong iconography if needed

This is effectively the same as T111222.

Once again, inlining equation SVGs would help here, too (since they would become white on black just as the text).

@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.

CSS filters are quite widely supported now if we wanted to do the fix suggested in https://phabricator.wikimedia.org/T129054#2095664 now.

(Related issue in app T295624)

In T129054#7542225, @Jdlrobson wrote:

@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.

Can you clarify which 3 options you are referring to? Any options that allows the formulas to display is fine with me.

In T129054#8360930, @alexhollender_WMF wrote:

In T129054#7542225, @Jdlrobson wrote:

@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.

Can you clarify which 3 options you are referring to? Any options that allows the formulas to display is fine with me.

There are 3 solutions in the task description. Note, that question was from over a year ago, so I am not considering this for a technical goal right now.

@Jdlrobson it seems like all 3 options use the drawer, and the differences are whether the drawer is white or black, and whether the math formula has a white background? I'm not sure what the rules are on when the drawer is black vs when it is white, but the white one is much easier to read, so we should use that if possible:

if we can't use that this is fine:

For reference, the Android app also uses light drawers, with and additional dark overlay for the content area:

...as does MobileFrontend for the CTA drawer, used for redlinks, and actions while logged

Change #1015287 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/MobileFrontend@master] Remove black background from references drawer

https://gerrit.wikimedia.org/r/1015287

Test wiki created on Patch demo by ESanders (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/560a719650/wiki/Reflexive_space?mobile_action=toggle_view_mobile#Reflexive_locally_convex_spaces

Above patch removing the black background in favour of the default:

Note that equations are still sometimes not visible due to a newer issue with lazy loading (T361212):

I don't know why Citation drawers were made black for light mode. I don't see any reason why they shouldn't follow the rest of the UI. We can make them background-color-base which would make them light in light mode. We also should have an overlay for the content like in Android. We can use the one that's implemented as part of the dialog component in codex. It uses background-color-base at 65% opacity. This still wouldn't fix the bug for dark mode, though. We would still want a dark citation drawer for dark mode.

As far as a fix for that goes. The math formulas should just have content-color-base in both colour modes. I don't understand why the formulas wouldn't share the styling of the text in which they're embedded. If we can find a solution that does that, we're good to go from my perspective.

Putting this in sign-off now because I don't think we need any more design on it. Feel free to resurrect with a new description as an implementation ticket, or create a new one with the task template.

On a side-note @DTorsani-WMF what do you think about having a variant of the dialog component that works like a mobile bottom sheet? Or would that need to be its own component?

In mobile apps, those bottom sheets sometimes work like a new tab for micro flows with their own navigation stack, etc. That would be a nice affordance to have.

I don't think we would want to use them in desktop, though.

In T129054#9836050, @JScherer-WMF wrote:

I don't know why Citation drawers were made black for light mode.

I would guess to make them obvious that they're drawers and not just random citation displaying on half a mobile page. I otherwise agree that they could follow the general color theme. I would use a darker color than background-color-base, perhaps background-color-interactive.

@JScherer-WMF It seems that a few people have responded elsewhere to the same question already so I will defer to their responses.

In T129054#9836050, @JScherer-WMF wrote:

We also should have an overlay for the content like in Android.

We already have an overlay, see my screenshots above (not sure why they aren't in the original task description screenshots).

I don't understand why the formulas wouldn't share the styling of the text in which they're embedded.

They are currently rendered as static images in most browsers (black text on transparent) - in dark mode they get inverted. When we switch to native math rendering they will inherit the font colour.

Sounds like the rest of your recommendations are aligned with the implementation in https://gerrit.wikimedia.org/r/1015287, (see https://patchdemo.wmflabs.org/wikis/560a719650/w/index.php?title=Reflexive_space&mobile_action=toggle_view_mobile&mobileaction=toggle_view_mobile#cite_ref-8 )

Please note that changing the background colours of the citation drawers is not very high priority right now, and DST is looking at sheet components which will refactor their styling soon.

Inverting the colours of the math symbol images should do enough to make them accessible/visible for now.

@JScherer-WMF it looks like the original bug is fixed.

To add confusion this is how it's currently behaving in light and dark mode:

Note: This will be fixed the correct way when T271001 is merged - perhaps it's worth calling this good and enough and resolving?

Is that good enough to call this resolved, or do we want to address the non-dark mode version (if so I'll create a new ticket to avoid confusion)?

In T129054#9844094, @Jdlrobson wrote:

To add confusion this is how it's currently behaving in light and dark mode:

Note: This will be fixed the correct way when T271001 is merged - perhaps it's worth calling this good and enough and resolving?

Is that good enough to call this resolved, or do we want to address the non-dark mode version (if so I'll create a new ticket to avoid confusion)?

Yes, I'll create a bug ticket for the weird white image background.

Done. T366220