ScrollFrame within a ScrollFrame issue.

[Mayron]

I've known about this issue for a while but no clue what the best approach is for dealing with it.

If you have a ScrollFrame widget inside another ScrollFrame and the inner ScrollFrame is scrolled out of view using the outer/parent ScrollFrame, then weird graphical glitches occur:

https://s21.postimg.org/gszw7xurr/img1.png

https://s21.postimg.org/d7zfaz8k7/img2.jpg

The effect is even more noticeable if the items inside the inner ScrollFrame have backgrounds but mine don't.

I guess the reason is because it breaks the masking of what should be visible and WoW doesn't know how to handle it. Not sure though.

I don't think it has anything to do with the rest of my code because this ScrollFrame inception problem always occurs despite the rest of the code. However, if you really want to view the code for any reason you can do from GitHub but the project is very confusing and large and both ScrollFrames are created in separate files

The outer ScrollFrame is created using "CreateDynamicFrame" found here:
https://github.com/Mayron/MayronUI-G....lua#L730-L736

and the inner one is created here:
https://github.com/Mayron/MayronUI-G...config.lua#L88

The "gui:CreateScrollFrame" function can be found here:
https://github.com/Mayron/MayronUI-G...ilder.lua#L165

[Mayron]

I've created an example to isolate the problem into a single AddOn:

## Interface: 70000
## Title: SCROLL FRAME TEST
main.lua

-- main.lua
local function OnMouseWheel(self, step)
    local value = self:GetVerticalScroll() - (step * 20);
    if (value < 0) then
        value = 0;
    elseif (value > self:GetVerticalScrollRange()) then
        value = self:GetVerticalScrollRange();
    end
    self:SetVerticalScroll(value);
end
 
local outer = CreateFrame("ScrollFrame", "SCROLL_FRAME_TEST", UIParent);
outer:SetPoint("CENTER");
outer:SetSize(200, 400);
outer:SetScript("OnMouseWheel", OnMouseWheel);
 
outer.child = CreateFrame("Frame", nil, outer);
outer.child:SetSize(200, 800);
outer:SetScrollChild(outer.child);
 
outer.child.bg = outer.child:CreateTexture(nil, "BACKGROUND");
outer.child.bg:SetAllPoints(true);
outer.child.bg:SetColorTexture(math.random(), math.random(), math.random());
 
local inner = CreateFrame("ScrollFrame", nil, outer.child);
inner:SetPoint("TOPLEFT", 20, -50);
inner:SetSize(150, 200);
inner:SetScript("OnMouseWheel", OnMouseWheel);
 
inner.child = CreateFrame("Frame", nil, inner);
inner.child:SetSize(150, 800);
inner:SetScrollChild(inner.child);
 
inner.child.bg = inner.child:CreateTexture(nil, "BACKGROUND");
inner.child.bg:SetAllPoints(true);
inner.child.bg:SetColorTexture(math.random(), math.random(), math.random());
 
inner.child.content = inner.child:CreateFontString(nil, "OVERLAY", "GameFontNormal");
inner.child.content:SetText("CENTER");
inner.child.content:SetPoint("CENTER");

The child comes out of the ScrollFrame mask once the inner ScrollFrame cannot be seen.

[Mayron]

I understand why this would happen. I think the masking area for what is visible becomes flipped so that the top of the mask is lower than the bottom of the mask and causes a graphical glitch. I wanted to fix this by determining the top and bottom points of this mask region but the API doesn't seem to have a way of doing this. I guess it's hidden from us and there doesn't seem to be a way of accessing this data.

I did try adding this to the outer ScrollFrame's OnMouseWheel handler as a manual fix but it still seems buggy:

outer:SetScript("OnMouseWheel", function(self, step)
    -- test code: --------------------
    local bottom = inner:GetBottom();
    local top = self:GetTop();
    print(top - bottom)
    if (top - bottom <= 0) then
        inner:Hide();
    else        
        inner:Show();
    end
    -----------------------------------