Canvas Group filled with black for mobile devices

Reproduction Steps

We have received numerous reports of this bug occuring for mobile users in our game, namely lower-end devices. This occurrence is seemingly random but consistently happens if your device suffers from the bug.

  1. I’ve only seen it happen in my game: 🕹️ nico's nextbots [ARCADE] - Roblox

  2. Select “play”, then select “arcade”, then select “spawn”

  3. When you spawn in, part of your screen should be black.

Expected Behavior

The black part of the screen should not be there at all.

Actual Behavior

The game screen is filled with black, and you won’t be able to see anything.


The reason I suspect this is a canvas group issue is:

  1. Looking at the first screenshot above, the leaderboard at the top right (whose parent is the canvas group) seems unaffected and you are able to see through the blackness. This was not something we elaborately added and is unusual behavior for Roblox GUI’s.

  2. The canvas group has a specific aspect ratio used in a UIAspectRatioConstraint, which is why it only covers a large portion of the screen. The original background transparency of the canvas group is WHITE and never changes throughout the game, so this is not a coding error of mistakenly making the background transparency 0.

Here is a screenshot of the canvas group in studio, set to 0.5 transparency for comparison and visibility:



Workaround

Replace the canvas group with a frame.

Issue Area: Mobile App
Issue Type: Display
Impact: Moderate
Frequency: Often
Date First Experienced: 2023-03-03 00:03:00 (-08:00)
Date Last Experienced: 2023-03-04 00:03:00 (-08:00)

12 Likes

If this occurs for lower end devices, this is likely a graphics issue because CanvasGroups are essentially throttled based on device performance and graphics. We haven’t had any update on CanvasGroups in a while so I’m not even sure if this will get a fix. My guess though.

I love your game

2 Likes

Thanks for the report! We’ll follow up when we have an update for you.

5 Likes

Sorry to bump this post after a few months, but has there been a fix for this issue? I’ve been trying to find a way to fix this bug for a while now.

Honestly, CanvasGroup is useless in its current state mainly because:


I want to have notifications show on a CanvasGroup so I can then fade them using the GroupTransparency property. However, this feature despite its potential is so weak (if you can call it like that) as many other features that were added onto Roblox.

I don’t like the feeling of knowing some players will not be able to see specific parts of the UI just because of their QualityLevel or because is exceeding the memory cap because it failed to allocate (don’t know what Roblox means by this). The quality of the CanvasGroup can also reduce drastically depending on the device’s memory usage.


With these limitations I prefer to just do it the old fashion way of setting the transparency of every descendant to 1 using tween service.


Please make some changes to this feature so developers can use it with zero fear of it disabling for some players as they are truly important.

Features that are really limited: Highlight, CanvasGroup, DepthOfField, Atmosphere, MaterialVariant and many others that I don’t remember now. I prefer a feature to takes years to come instead of just some random addition that has a huge potential, but then Roblox just discourages its use because of performance implications and because of the tons of limits it has in order to support multiple devices.

4 Likes

Minor bump, but this is still an on-going issue.

If the reason for this happening is due to lack of memory space for the device, it would be nice if there was a way to at least check for that and render the UI differently at the very least. It might not be a great solution but it’s better than rendering a black frame.

(this is assuming it’s a memory issue and not just a hardware issue)

3 Likes

I am especially impacted by this issue. Canvas groups with more than 0.998 background transparency will also render a black square. This causes almost every game which utilizes Canvas Groups to have varying artifacts only certain people witness.

0% Transparent

99.8% Transparent

>=99.9% Transparent

Imagine you’re on a 25 killstreak and you get blindfolded by a tournament prompt.

There needs to be special compromises put in place when these kinds of situations occur. Notably, Canvas Groups shouldn’t go opaque when a rendering error occurs. This is because plenty of the notable games which use them tend to have the elements right in the middle of the screen, sometimes taking up the entire screen.


When it comes to Highlights, they should utilize alternate methods of rendering outlines even if those methods have to lower in quality to preserve performance.

In DOORS, specifically door 50, highlighted books are only visible via outline, which can cause problems when finding things. More specifically, you cannot see the outlines that other people see, especially with lower hardware. Lower end hardware currently has a disadvantage compared to higher end hardware, not just in general framerate and performance, but in user information which everyone needs to play as intended.


For now, I suggest these precautions for all developers:

  • Set any invisible CanvasGroups to 0.998 transparency to avoid artifacts, and generally avoid using CanvasGroups whenever possible.
  • Always include a fill to any highlights which only have outlines to avoid a lack of information for some players with sub-optimal hardware.
  • If available, use a low end device to test your games from a different perspective. This helps with adapting your games in the case some features in your game are not acting as intended.
3 Likes

Some players are also reporting this issue to me, is there a way to do a follow up with the engineers? This bug has been around for a while now.

The user has an iPad 5th Gen running on iPadOS 16.6.1, the must up to date version as we’re talking. The game averages at around 1.4GB memory. It was in this game : Furry Fandom: Hangout - Roblox

An image follows:

2 Likes

Has anything been said elsewhere about this? I understand it’s not really a bug due to its limitation being mentioned on the docs, but surely there’s a much better way around having it render black and opaque.

3 Likes

@thirdtakeonit Do you know any additional information about the issue? Has that bug been put on hold by the engineers for other things? Or perhaps is it being fixed for a future update but not right now? Because it’s been a while now.

1 Like