"Bleeding" UI objects that are clipped via ClippedDescendants are not consistent between UIPageLayout.Circular enabled/disabled

[7z99 (cody)]

Description: This one’s a hard one to explain but if you have a frame with a UIPageLayout and you’re on the second page, but the first page has a UI object that sort of bleeds (is positioned) into the second page, and you have ClipsDescendants enabled, the “bleeding” object will still be visible when UIPageLayout.Circular is false. When it is true, the object disappears, causing an inconsistency. I expect the behaviour to be consistent regardless of whether UIPageLayout is true or false.

Where it happens: Both studio and in-game, not specific to any one game

When it happens: First noticed probably mid-February 2023, can’t really be more specific as I never thought to write down a date or time, and wasn’t able to reproduce it minimally or consistently until now (March 23, 2023 6:38 ADST)

Videos and images:
Observe the button disappearing and appearing on circular true, but not disappearing on circular false (red frame is the TextButton’s parent):

Repro steps:
1- Create a frame, set ClipsDescendants to true
2- In the frame, create UIPageLayout
3- Create 2 more frames inside the frame from step 1.
4- In one of the frames in step 3, create a TextButton, position the TextButton at 1, 0, 0, 0.
5- Observe the difference when flipping through the pages with Circular false, and with Circular true.

Repro file:
uiPageLayoutIssue.rbxl (65.0 KB)

System info:
Not too sure whether or not this is a rendering issue but it still looks wrong so I’ll put system info just to be safe. Happens on both my laptop and my PC:

PC:
CPU: AMD Ryzen 5 5600G with Radeon Graphics @3.90GHz
Memory: 48.0GB/47.9 usable @3200MHz
GPU: NVIDIA GeForce RTX 3070Ti
OS: Windows 10

Laptop:
MacBook Pro M1 Pro 14" (2021), 512GB SSD, 16GB RAM on macOS Ventura

[Focia19]

We’ve filed a ticket into our internal database for this issue, and we will update you when we have further information.

Thanks for flagging!

[stadium_parkour]

Hi, thanks for reporting this issue! I’m on the UI Creation team and I’ll investigate this and get back to you when I have an update.

[stadium_parkour]

Hi, I have some updates on this:

Background

So when you have a “bleeding” object, that means the GuiObject is a descendant of a page in the UIPageLayout, but it is positioned outside the rect of the page.

Firstly, I am wondering if you can explain more about your usecase where you need this setup? Generally, UIPageLayout is designed under the assumption that the descendants of each page are within the rect of the page container. So my first thought is can you redesign your UI so that the contents of each page are placed within the page’s container?

Next, when UIPageLayout.Circular == true and the UIPageLayout’s parent has ClipsDescendants == true, the position of the offscreen aka “clipped” pages is currently undefined. Currently, we wrap the pages back around to the left side of the clipping container. For example:

In the above example, page “3” is offscreen. However, instead of being to the right of page “2” as you might expect, it is wrapped around to the left of the clipping container and is positioned to the left (it is selected so you can see its position even though it’s clipped).

So, in the above example, if you have “bleeding” GuiObjects going outside page 3 to the left that you expect to be shown over page 2, they won’t be positioned where you expect.

This is what I believe is happening in your example placefile: the red frame is positioned to the right when Circular=true, but positioned to the left when Circular=false:

Solution

My first recommendation is that the contents of each page should be positioned within the page bounds, so first check if that is an option for you.

If you do need “bleeding” GuiObjects going outside of each page, then set Circular=false so the relative position of each page is deterministic/known.

For the case where Circular=true and there are at least 2 offscreen pages, I have come up with a solution where we position the adjacent hidden pages to the left and right of the visible pages. This allows “bleeding” GuiObjects in those adjacent pages to have the same behavior for Circular=true vs Circular=false:

I’ll try turning on this fix in the next Roblox release next week.
I also made this testplace with some “bleeding” GuiObjects if it’s useful:UI Page Layout Place Ex 1 - Roblox

[7z99 (cody)]

@stadium_parkour

Firstly, I am wondering if you can explain more about your usecase where you need this setup?

Hi, yes.

So in our main UI, we have it laid out using separate pages using a UI page layout. Some of these pages, however, have secondary pages which are positioned at 1, 0, 0, 0 which means they’re bleeding onto the next page (note here in this video, switching to the title shop in our case, is done manually by moving contents of the equip page to -1, 0, 0, 0, and the title shop is tweened to 0, 0, 0, 0 so it is visible, we aren’t using a UIPageLayout for this behaviour)

The problem arises from when you go to the next page (teleport). The equip button from the title shop bleeds into the next page and even though it isn’t visible (it’s clipped) it is still clickable, it is roughly at where I drew the rectangle. It changes the mouse icon to indicate there is a clickable button but players could unintentionally equip a different title because they click on something they didn’t intend to. So ClipsDescendants of the container frame is on, but because the button is technically not obstructed (other than by ClipsDescendants), it is clickable. I’m able to send a repro to DMs if you’d like because this may or may not be a separate issue but yeah.

@stadium_parkour

My first recommendation is that the contents of each page should be positioned within the page bounds, so first check if that is an option for you.

Unfortunately because of how our shop is laid out this probably isn’t viable.

@stadium_parkour

I also made this testplace with some “bleeding” GuiObjects if it’s useful

I will have a look soon, thanks.

[stadium_parkour]

Hmm, that does sound like a bug. If a button is clipped by a container with ClipsDescendants=true, it shouldn’t be clickable. If you could, would you mind sending me a repro rbxl/rbxm to investigate?

I tried to repro myself with a simple example, but the button was correctly clipped for me:
UIPageLayoutClipping.rbxl (49.9 KB)

[7z99 (cody)]

Hey, I have sent you a private message

[stadium_parkour]

Just to update the thread here, this issue was resolved by setting ClipsDescendants=true on the “Equip” page, so the “titles” sub-page didn’t spill over into the “Teleport” page.