How to fix screen blend mode issue on buttons

Ignition
1

I have some styles that use "background-blend-mode:screen" to blend more than one gradient on the background image property. I was having a problem where it was blending in the default blue color when I was using these styles on buttons resulting in strange-colored gradients.

The problem is that it blends the inherited background color property in with the background image property I was creating. Applying the style to a label looked correct while applying it to a button would produce an unintended color.

The easiest way to fix this is to override the background color property with a transparent color.

Here's example CSS that overrides the background color so it looks right when applied to a button.
Example:

	background-color:#FFFFFF00;
	background-blend-mode:screen;
	background-image:linear-gradient(to bottom, rgb(255,0,0), rgb(128,0,0)), linear-gradient(180deg, rgba(200,200,200,0) 0%, rgba(230,230,230,50%) 45%, rgba(0,0,0,0) 51%);

You can use a similar trick to make a single grayscale gradient and apply a background color to blend it into a nice gradient.

For those who don't know, it's always best to use buttons for things that people click on because it gives you an "onActionPerformed" event which is more reliable than "onClick" with some touchscreen drivers. I don't know how relevant that is with recent touchscreen drivers but I have definitely had touchscreen drivers struggle with onClick but work with onActionPerformed.

1 Like
2

You may try use alternative css:

background: linear-gradient(to bottom, rgba(255, 0, 0, 0.7), rgba(128, 0, 0, 0.7)),  /* Red gradient with transparency */

 linear-gradient(180deg, rgba(230, 230, 230, 0.5) 45%, rgba(0, 0, 0, 0) 51%);  /* Grey overlay with transparency */
3

I do a lot of translucent overlays. They are usually my preference but they don't get as sharp of contrasts so I use the blend mode sometimes. Specifically I used the blend mode to mimic styles that were on buttons in a SCADA I was replacing because the customer wanted it to look like it did. I actually didn't like how it looked but I did what they wanted.

This was that style. Fancy but I don't really prefer the "really glassy" look for buttons. My typical button style is just a mild gradient.

.psc-glassBlueButton{
	background-color:#FFFFFF00;
	background-blend-mode:screen;
	background-image:radial-gradient(circle at bottom, rgb(75,163,220) 0%, rgb(75,163,220) 2%, rgb(36,41,52) 80%), linear-gradient(180deg, rgba(200,200,200,0) 0%, rgba(230,230,230,50%) 45%, rgba(0,0,0,0) 51%);
}```
4

Im not sure what you are expecting, the blend mode means it blends with all the other background colors, including fixed values.

This one also seems to have a bunch of options

I dont really know what result you want tho.

i think you are forgetting that using the blend mode it is blending with the slightly grey/white background, causing a more white gradient. You should be able to get the same effect with just different colors

1 Like
5

I need to dig into CSS more. The mix-blend-mode looks like it could be have some interesting applications. Thanks for the tip.

I'm getting the result I was going for by putting a translucent bg color on the background. I tested it with #00000000 and #FFFFFF00 and both gave the same result (comparing screenshots). I thought "none" would work but it didn't. I looked it up and learned that "none" is not a valid background-color.

I was just passing it on the the community because I didn't figure it out till I looked at the IA style sheet for buttons because I learned about the background-blend-mode from a CSS example rather than reading the spec for it.

A couple of your posts pointed me in the right direction for troubleshooting this regarding looking up the IA styles and trying "!important" to override inherited styles. Thanks for your help with those posts.

6

Woah woah nono that was not what i was suggesting
You do not need to overwrite anything or use !important

The reason the restult you get when using blend mode AND set a FIXED backround to be "transparnt" is because it is a BLEND of the background + the gradient.

SO on a blue button you will get a different result as on a plain "transparent" label.
Thats what blend mode is supposed to do.

You are NOT supposed to overwrite the background color especially not with !important IF you want to use blend mode.

SO since your result is not what you wanted without bypassing colors, than you need to change the linear gradient instead and stop using blendmode.

Could you give a img of your button with the corresponding css that you are using right now for that button)

1 Like
7

Sorry, the comment about !important is unrelated to the blend mode issue.

I was saying I learned something new from another post you made. Maybe I shouldn't have mentioned it but I was just thanking you for your useful posts.

I wasn't saying that I'm having a problem. I was saying that if someone is having a problem with a blend mode gradient applied to a button they need to override the background color on their style to a transparent color (any color 100% transparent) to override the default background color that's inherited from the button style.

This is what it looks like with 100% transparent Black and White vs what it looks like if I don't send a BG Color (same gradient)

Button Samples

I'm just trying to explain how you can use blend mode on a button without getting funny colors.

8

ah oke

but what Im saying is that you should not use blendmode for these results

You should use something this:

.psc-glassRedButton{
background-image:linear-gradient(to bottom, rgb(255,0,0),  rgb(255,128,128)  50%,rgb(255,0,0) 51% , rgb(128,0,0));
}

Well technically this, but i think you dont really want this. Do you buttons look the same in darkmode ?

background-image:linear-gradient(to bottom, rgb(255,0,0),  color-mix(in srgb,  rgb(255,0,0), var(--containerRoot))  50%,rgb(255,0,0) 51% , rgb(128,0,0))

image
See basicly Same result without having to use blend mode. You used some more points at 45% ect, You can still do that here too, but thats for you to figure out :slight_smile:

Blend mode takes a lot more performance than these gradiants.

2 Likes
9

Oh, I see what you mean. I didn't realize there was a performance component to using blend mode.

Thanks for the information and yes that style is basically the same result.

I haven't been doing dark mode and light mode styles yet. I know about them but I haven't encountered a use case where they really fit in the Ignition projects I've done since they were introduced. I'm sure some people put light mode/dark mode styles in all projects but we haven't been doing that yet. At some point I plan to update my style library to support light mode and dark mode but it isn't top priority for me currently.

10

I did another google and seems they improved its performance a bunch over the years, but yh if it can be avoided by just adding some rgb values, you still should try to avoid it.

11

I did some performance testing last night. I made a template with a flex repeater with a script that generates 1000 instances of whatever template I pass in. Then I passed in a template with each gradient applied to a style on the background to benchmark it. I used 2 different views.

I think the optimizations might be using the video card because the performance was virtually identical with 1000 instances created but my computer at home has a RTX 3080. I'll test it on a phone when I get a chance.

The reason I had the shine in a separate gradient is that I was animating it but I could probably still do that with your much simpler gradient. I agree it makes sense to do the easy optimizations when you can.

1 Like