UIGradient not Rendering Diagonals Correctly

Reproduction Steps
System Information: Windows 10 Desktop, AMD A10-5700, 16GB RAM, NVIDIA GeForce GT 1030

Repro: Quick Test 2 - Roblox
Repro: UIGradientRepro.rbxl (33.9 KB)

Reproduction can be achieved by using a UIGradient constraint and setting Rotation to 45 or 135 degrees (or equivalent cycle successors thereof) and adding 5 sequence points (interestingly if there are just 3 sequence points it seems to flip the direction to what is expected)

image
(not included in test file but is simply white at position 0.5, black either side at the indicated rotation values)

Expected Behavior
I expect the gradient to produce a thin distinct white line down the axis x=y (or x=-y) when the rotation is set to 45 or 135 degrees respectively.

Actual Behavior
A peculiar ghosting/shadow effect seems to result in colours jumping across boundaries (might specifically be the colour at position = 0)
image
image

Workaround
Using rotation values of 44/46 & 134/136 degrees instead albeit not perfect.

Issue Area: Engine
Issue Type: Display
Impact: Moderate
Frequency: Often
Date First Experienced: 2021-07-08 00:07:00 (+01:00)
Date Last Experienced: 2021-07-08 00:07:00 (+01:00)

7 Likes

I can confirm this is indeed a bug although it is a bug I use to my favor, I enjoy using mostly Roblox to create my UIs any this UI Glitch just happened to work in my favor for creating cool effects through this property.


The only way I’d support this bug being patched is if Roblox Introduced a new Property for UIGradient Styles so we can still recreate these effects.

UI Download


Edit

My first recorded time abusing this feature was 4/28/2021

Thanks for the report! We’ve filed a ticket to our internal database and we’ll follow up when we have an update for you.

4 Likes

This really needs to be fixed. The repro still works and this bug is still causing tons of issues.
I can’t use gradients for something because of this and its super frustrating

2 Likes

This still happens and even affects the built-in & app ui.

image
[Left]: Rotation -90, max UICorner | [Right]: Rotation 45, no UICorner

Repro:
gradientbugrepro_a.rbxl (56.8 KB)

Agh! I rely off of this behavior, please do not change this Roblox :frowning:

Like @wallofgarlic stated, I actually use this bug as a feature to create cool effects like radial/conic gradients and drop shadows.

so maybe they should fix the bug but keep the feature?

I think they should fix this considering it’s such a severe bug that can be observed in many games, but I totally get your use-cases. Roblox UI is in a weird state where there are so many potentially useful features, such as UICorner and UIGradient, but they just haven’t been expanded upon for years and years, leaving them missing important functionality.

Examples:
UIGradient only allows linear gradients, not radial, or any of the other many types
UICorner only allows the changing of ALL the corner radiuses for a given element, you must use hacky methods to make elements that appear to have varying corners.

Both examples are things that are found in other popular engines

Hi, we recently released a fix for this and it should be effective in studio, do you mind verifying your repros to see if it still have issues? We are also gradually rolling it out to clients in the following weeks.

I’ve run a few tests and looked at my old repros and I can’t reproduce this issue anymore.
Thanks so much for fixing this :smiling_face:

1 Like

Hi, due to a unexpected breakage, we would need to revert this flag temporarily. :sob: We will try re-deploy next week.

2 Likes

Looks to be fixed now, thank you!