mix-blend-mode causes all kinds of issues

[bpasero]

Issues:

• lost cursor in the editor (Cursor dissapear after move between parameters #9029)
• lost LCD subpixel anti alias
• focus outline coloring turns gray
• DND feedback in light theme is gray when it should be blue

[bgashler1]

I don't think this can be solved simply.

We probably need to do one of the following:

• Use rgba colors (not a great long term solution, but I'm willing to do it)
• Use a nasty and hacky z-index trick on duplicate versions of the tabs that act as the click/keyboard focus targets. They would have transparent backgrounds and would be opacity: 0 when not in focus or active. This would basically just be trick to get a colored overlay. (complicated and potentially buggy).
• Use JavaScript internally to calculate the colors
• Use a library that enables color-mod() function usage from the CSS 4 spec during runtime (Explore to introduce CSS variables from themes and use in workbench #8151).

Let me know what you think would be ideal from an engineering perspective.

[bpasero]

Yeah, there is also the issue that once you set mix-blend-mode, all children seem to inherit this (similar to opacity) and you cannot unset this in a child. This is also the reason why I cannot have my nice blue drop feedback in light theme when dragging over tabs.

If we do something about it, it should not be a hack. Maybe we go back to rgba() in tabs land?

[bpasero]

There are more issues with mix-blend: we lost LCD subpixel anti aliasing in the tabs control which will cause it to look blurry for some users.

Marking as important because I would not want to ship July without a fix for this (going back to opacity?).

[bgashler1]

We agreed in the UX meeting today to remove the mix-blend-mode and instead use rgba colors to avoid issues with anti-aliasing and other color side-effects that we cannot otherwise work around.

[alexdima]

👍 combined with the use of translate3d in rendering the cursors, it causes #9029

[bpasero]

I pushed a change to remove mix-blend-mode from the tabs title. I did not introduce rgba() colors though and would like to wait for community feedback before reacting.

[jrieken]

@bpasero We still use mixed-blend-mode in the high contrast theme. Unsure about the effects that has?

[bpasero]

@jrieken true, I saw that as well and it is probably very old. @bgashler1 do you have an idea why we have it?

[bgashler1]

@jrieken @bpasero the mix-blend-mode: difference in the high-contrast theme is to enable highlighting selected text in white while inverting the light text color so it is visible.

Without this technique, it would look like this.

A long time ago, we used a grayish selection which was not high enough in contrast to be accessibility compliant.

Using this inverting technique hasn't caused any problems that I'm aware of and has been in the product for a long time. The alternative, which is currently not possible unless we add more logic, is to enable styling the text color of the selected text (beyond just allowing an overlay) and use black or very dark colors for all tokens when they're selected in the high-contrast theme.