UI spawned during runtime clipping out of scrolling frame

[Pa_roy0 (paroy)]

hello, im working on a tech tree in game right now, and i noticed that frames i spawn inside of a scrollingframe (lines) clip out of said frame, but seemingly only when they are at an angle.

the lines are spawned with a simple function;

local function DrawLine(ButtonA, ButtonB, Parent)
	local LineWidth = 10
	local PointA = ButtonA.AbsolutePosition + ButtonA.AbsoluteSize / 2
	local PointB = ButtonB.AbsolutePosition + ButtonB.AbsoluteSize / 2

	local ParentOffset = Parent.Parent.AbsolutePosition
	PointA -= ParentOffset
	PointB -= ParentOffset

	local delta = PointB - PointA
	local distance = delta.Magnitude
	local angle = math.atan2(delta.Y, delta.X)

	local line = Instance.new("Frame")
	line.Size = UDim2.new(0, distance, 0, LineWidth)
	line.Position = UDim2.new(0, (PointA.X + PointB.X) / 2, 0, (PointA.Y + PointB.Y) / 2)
	line.AnchorPoint = Vector2.new(0.5, 0.5)
	line.Rotation = math.deg(angle)
	line.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
	line.BorderSizePixel = 0
	line.ZIndex = 0
	line.Parent = Parent
end

and this is the resulting hierarchy (the frames are spawned inside of the “Lines” folder but i tried spawning them directly inside the scrollingframe and that didn’t fix the issue either)

meanwhile here is a video of it happening

Any help is appreciated, thank you!

[phongski389 (pdv)]

Change your gray background Frame to CanvasGroup.

[Pa_roy0 (paroy)]

yeah, that fixed it, thank you!