EditableImages not updating correctly underneath a CanvasGroup

,

I am working on a project involving EditableImages and I encountered a bug related to EditableImages not updating correctly when they have a CanvasGroup as an ancestor.

When drawing pixels to the EditableImage using any one of the APIs, the image doesn’t update immediately and remains unchanged until something in the GUI changes, this could be anything from resizing the window to a button changing colour.

Demonstration

Expected behaviour: The image updates immediately and does not remain unchanged

When: I first discovered this today, haven’t used EditableImages in this way before so I can’t say if this behaviour is new or not

Where: I have only observed this bug in Studio as this feature is still not available to published experiences. I was also able to reproduce the bug with all user plugins disabled.

Repro:

  1. Create a CanvasGroup inside a ScreenGui
  2. Create an ImageLabel inside of the CanvasGroup
  3. From a script, create an EditableImage and parent it to the ImageLabel
  4. Draw something to the EditableImage (you might have to add a delay to see the bug, like I did in the video)
  5. When playtesting, try resizing your screen or updating the GUI in some way and you should see the image finally update

In my experience this happens 100% of the time

editableimage_canvasgroup_bug.rbxl (55.9 KB)
^ The relevant code is inside StarterGui

I understand that this feature is in beta, but I thought I would mention this bug in case nobody was aware of it. Also, I can’t post bug reports so I’m hoping this will reach somebody who’s in charge anyway

1 Like

My Roblox Studio version is 0.630.0.6300556 (64bit)

1 Like

For anyone experiencing this issue, I have a hack that can fix this.

Create a frame inside the CanvasGroup with BackgroundTransparency set to 1 such that it is invisible.
Then, whenever you’d like the EditableImage(s) to update, you simply change an attribute of this frame, for example:

Frame.BackgroundColor3 = Color3.new(math.random(), math.random(), math.random())

This works for me as a temporary solution.

1 Like