Bug Transitions breaks background-color and image tint colors in Unity 2022.2.1f1

I encountered this bug after upgrading from 2022.1.22f1 to 2022.2.1f1, here's how to reproduce it:
Create a simple UXML view, like this one:

Code (UXML):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
2.     <Style src="project://database/Assets/test.uss?fileID=7433441132597879392&amp;guid=090a9e6e605854b4aaea35dcd39c747b&amp;type=3#test" />
3.     <ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); flex-direction: row;">
4.         <ui:VisualElement focusable="true" class="square" style="flex-grow: 1; width: 20%; height: 50%; margin-top: auto; margin-bottom: auto; margin-right: 2%; margin-left: 2%;" />
5.         <ui:VisualElement focusable="true" class="square" style="flex-grow: 1; width: 20%; height: 50%; margin-top: auto; margin-bottom: auto; margin-right: 2%; margin-left: 2%;" />
6.         <ui:VisualElement focusable="true" class="square" style="flex-grow: 1; width: 20%; height: 50%; margin-top: auto; margin-bottom: auto; margin-right: 2%; margin-left: 2%;" />
7.         <ui:VisualElement focusable="true" class="square" style="flex-grow: 1; width: 20%; height: 50%; margin-top: auto; margin-bottom: auto; margin-right: 2%; margin-left: 2%;" />
8.     </ui:VisualElement>
9. </ui:UXML>
10.  

Code (USS):

1. .square {
2.     -unity-background-image-tint-color: rgb(142, 69, 69);
3.     background-image: url('project://database/Assets/Sprites&Models/UI/whitePanel.png?fileID=2800000&guid=1c7190449f6e07c4c86e97c1dd953b78&type=3#whitePanel');
4.     transition-property: -unity-background-image-tint-color;
5.     transition-duration: 200ms;
6.     transition-timing-function: ease-in-back;
7. }
8.  
9. .square:focus {
10.     -unity-background-image-tint-color: rgb(76, 188, 68);
11. }
12.  

Notice that in the USS file you have to replace the url of background-image with a URL of a white texture (any texture works, really).

The presence of transitions breaks the colors. These are the colors of the squares without transitions, the green one is the focused square, the brown-ish ones are the unfocused ones:

These are the colors I get while using transitions on the tint color:


In the second picture, the lighter pink squares were originally the same color of the leftmost one, and became like that after gaining and losing focus. You can also see that the color of the focused square doesn't match with the first picture (which is displaying the correct one).

This occurs independently of the duration of the transition, of the unit of measurement used for the duration and of the easing function specified (I didn't test them all, but it behaved exactly the same with 6 easing functions I randomly picked. It behaves the same with the default easing function as well).

I believe this issue is related to the interpolation of colors, as it occurs even on transitions applied to the background-color property.

I am also sure this bug was introduced after 2022.1.22f1, as I was working on my project using that version until today, and after upgrading, this problem started occurring on existing UIs I had in my game.

Finally, the problem doesn't occur on UIBuilder's preview mode.

 

Hi, sorry for the late reply, I just did!

 

Seems to be the same issue as this one https://forum.unity.com/threads/usi...anges-the-color-displayed-2022-2-0f1.1372329/

The color is changed when the dynamic color usage hint is set. (Automatically by unity during transitions. If not already set.) You can test by setting the usage hint yourself and seeing that the color will differ from what you selected in the editor at runtime.

 

Just came to this thread after upgrading to 2022.2.7f1 and seeing some inexplicable color discrepancies in our game UI. It appears it is not just to do with transparency, but affects colors in general (e.g. It also affects text color.)

The above bug report claims a fix for
2022.2.7f1, but I can confirm the issue in this thread still persists in 2022.2.7f1. I've uploaded a bug report with a very minimal reproduction scenario.

@karl_jones could we maybe get some input on whether the claimed fix should also relate to the issue described in this thread and in my bug report (case IN-32832)? The inconsistent UI colors prove a major blocker for us to upgrade to 2022. The workaround of not using the DynamicColor usage hint is not possible, because any timed transition style forces it on, and no animated transitions, anywhere, is an unacceptable trade-off.

 

I'm seeing the same thing having just upgraded to 2022.2.9f1, and was scratching my head as to how I could have broken this myself (turns out it wasn't me!)

 

My project is in linear color space, as I believe that's the default (I didn't change it, had to look up where that even was)