CanvasGroup not being rendered in mobile devices

[NuggetStransburg]

You can write your topic however you want, but you need to answer these questions:

1. What do you want to achieve? I am currently implementing a private server system for my racing game. I have managed to get the back-end working, although I am running into issues with the front-end, more specifically for mobile. I use SurfaceGUIs for the racetrack selection menu. Each track has its own CanvasGroup (created from a template) with a ImageButton and another CanvasGroup below the ImageButton for inserting codes.

2. What is the issue? Here’s how it is sorted in the explorer:
   

   
   
   (The black box is the “BottomButton” CanvasGroup which isn’t being shown)

And here’s how it looks in-game:

(The red part is the “BottomButton” CanvasGroup, which is not being rendered properly.)

The way it works right now is: By default, the template is invisible and the “BottomButton” CanvasGroup’s GroupTransparency is set to 0.
My script clones the “Template” CanvasGroup for every track (which are stored in a module), set them up & make them visible. As seen below, whenever the player clicks on the arrows, the SurfaceGui’s adornee part (which is transparent) moves and the next/previous CanvasGroup is highlighted. “BottomButton”'s GroupTransparency is set to 0 when highlighted, and 1 when not.

This is in Roblox Studio’s device emulator (it works the exact same normally, although you use A/D or the scroll wheel to select other CanvasGroups).

The actual issue is, when I run this in an actual physical phone, the “BottomButton” CanvasGroup only appears in the first CanvasGroup (the “SINGAPORE GRAND PRIX” one), and does not hide itself when unhighlighted.

(The “TextLabel” seen in the right is the same as the “TestLabel”, I have renamed it in Studio and did not publish the game; I am sure that is not the issue, though.)
I am not sure what is causing this because, as seen by the footage above, the GroupTransparency is properly being set from 1 to 0. (I used Adonis Admin’s Dex Explorer to confirm)

The Visible property is also set to true in all of the “BottomButton” CanvasGroups, I have verified it myself off-camera.

4. What solutions have you tried so far? Did you look for solutions on the Creator Hub?

I have manually tried setting the GroupTransparency on the CanvasGroups through Dex Explorer, nothing happened
I found a few posts in the Dev Forum talking about other issues similar to mine, although I have not found any that had shown the same issue as mine

Here’s part of the code for highlighting and unhighlighting the main CanvasGroups:
( I have cut out some irrelevent parts & variables, such as setting up the images & racetrack info and other functions such as detecting when the textbox is clicked)

-- game.StarterGui.MainMenu.Scripts.TrackSelection
local MainGUI = script.Parent.Parent
local TrackUI = MainGUI.TracksUI
local MobileButtons = script.Parent.Parent.TrackSelection_Mobile
local SelectedTrack = nil
local Part = workspace.TrackSelection:WaitForChild("TrackSelectionPart")
local AmOwner = game.ReplicatedStorage.Events.CheckOwnership:InvokeServer()
--(Issue still happens whether AmOwner is true or false)
 function HighlightButton(button:GuiObject)
	TweenService:Create(button,_TweenInfo,{GroupTransparency = 0, Size = UDim2.fromScale(0.072,1)}):Play()
	TweenService:Create(button.BottomButton,_TweenInfo,{GroupTransparency = 0}):Play()
end
function UnhighlightButton(button:GuiObject)
	TweenService:Create(button,_TweenInfo,{GroupTransparency = 0.4, Size = UDim2.fromScale(0.06,.8)}):Play()
	TweenService:Create(button.BottomButton,_TweenInfo,{GroupTransparency = 1}):Play()
end

-- The function that "moves" the SurfaceGui's adornee ("Part" variable) &
-- calls the functions above
function GoToButton(index:number)
	local TargetButton = getButton(index)

	if not TargetButton then return end

	local TargetZ = OriginalZ + (difference * index)

	TweenService:Create(Part,_TweenInfo,{Position = Vector3.new(OriginalPosition.X,OriginalPosition.Y,TargetZ)}):Play()
	HighlightButton(TargetButton)
	UnhighlightButton(getButton(SelectedIndex))

	SelectedIndex = index
	SelectedTrack = TargetButton.Name
end

-- Function for requesting the actual teleporting; server returns True or False along with an error message, not really related but I wanted to keep this in
function OnButtonClick(TrackName:string)
	local success,msg = game.ReplicatedStorage.Events.Teleport:InvokeServer(0,TrackName)
	if success then
		for i = 1,0,-0.01 do
			task.wait(0.01)
			MainGUI.BlackScreen.BackgroundTransparency = i
		end
	else
		print(msg)
	end
end

-- The main function for the cloning & events
function LoadTracks()
	for _,button in pairs(TrackUI.Frame:GetChildren()) do
		if button.Name ~= "Template" and button.Name ~= "UIListLayout" then
			button:Destroy()
		end
	end

	SelectedIndex = 1

    local currentIndex = 0

    TweenService:Create(Part,_TweenInfo,{Position = Vector3.new(OriginalPosition.X,OriginalPosition.Y,OriginalZ + difference)}):Play()

	for i,Track in pairs(TracksInfo) do
		currentIndex += 1

		local ThisIndex = currentIndex

		local CanvasGroup = TrackUI.Frame.Template:Clone()
		CanvasGroup.Parent = TrackUI.Frame
		CanvasGroup.Name = Track.GPName
		--~10 lines of irrelevant setting up that have been cut out
		

		if AmOwner then
			CanvasGroup.BottomButton.TextBox.Visible = false
			CanvasGroup.BottomButton.CreateServerText.Visible = true
		end
		
		CanvasGroup.Button.MouseButton1Click:Connect(function()
			if swiping then return end
			
			if SelectedIndex == ThisIndex then

				OnButtonClick(Track.GPName)
			else
				GoToButton(ThisIndex)
			end
		end)

              -- a few more irrelevant functions that have been cut out, such as detecting when 
              --the TextBox loses focus and when the CreateServerText button is clicked
		UnhighlightButton(CanvasGroup)

		CanvasGroup.Visible = true
	end
	
	HighlightButton(getButton(SelectedIndex))
end 

-- MobileButtons connections
MobileButtons.Next.MouseButton1Click:Connect(function()
	GoToButton(SelectedIndex + 1)
end)

MobileButtons.Previous.MouseButton1Click:Connect(function()
	GoToButton(SelectedIndex - 1)
end)

MobileButtons.Select.MouseButton1Click:Connect(function()
	local button = getButton(SelectedIndex)
	OnButtonClick(button.Name)
end)

LoadTracks()

There’s no errors in the output & everything else works fine (apart from typing into the TextBox also not working, but that’s an issue for later). I partially believe this is an engine bug, although there’s probably a reason behind this.

Let me know if you need any more info about the issue, code, or anything else really this is quite a specific bug so pardon me if anything sounds confusing, I tried my best to explain it all

[East98]

Your issue could be low memory on mobile devices. Per the documentation on CanvasGroup:

• CanvasGroup consumes extra texture memory. The quality of the texture and total memory usage is limited by the Enum.QualityLevel of the client. When exceeding the memory cap, CanvasGroup will render as a blank texture.

[NuggetStransburg]

Thank you! That was probably why half of the images weren’t working either, lol.
I’ve replaced both the CanvasGroups with Frames and just made the bottom thing tween down instead of making it vanish in and out.