Styles are mangled when hiding and showing

I’ve been having huge issues with UI Toolkit.

What I’m trying to achieve is very simple; have a ‘menu button’/cog, when pressed, pulls up a menu in the center of the screen, and hiding that button at the same time. When you press ‘resume’ the menu disappears and the cog reappears. Simple, eh?

For a bit of history; I originally tried this with two separate Panel Renderers, scripts and styles - one for the cog, one for the menu, and hid and showed them using the SetScreenEnableState() method in the Unity examples. This didn’t work in the end as it caused a slew of errors within the internals of event system, throwing Null Pointers.

So I amalgamated the two Panel Reneders, scripts and style into one, and changed the visibility of the styles via setting style.display to either DisplayStyle.None or DisplayStyle.Flex.

Before I got to this I managed to get an absolute ton of;

WebGL - GL INVALID OPERATION: Insufficient buffer size

when ‘Build and Run’ -ing. The code would work perfectly in the editor but crash as soon as I moved the mouse over any element in the UI.

I stripped all of the failing UI elements out into a ‘cut down’ version of the project in order to bug fix the issue.

For some reason this seemed to clear up when I removed the text=“RESUME” from the Button element and moved it into a <ui:Label text=“RESUME” /> and removed any individual styles on the Button itself.

I have no idea why this happens. It still happens in the main version of the project, but now not in the stripped-down version. So this is still an issue for me going forward. Any help or advice on that would be gratefully received.

I still have another issue. Now I’ve gotten the project to not crash in a massive heap, I still have issues with hiding and showing elements where the entire screen gets mangled.

Upon hiding and showing turns into;

(Note: I have both cog and menu showing at the start for ease).

I’ve tried hiding using DisplayStyle.None / DisplayStyle.Flex and Visibility.Hidden / Visibility.Visible - and both! And always I get this issue.

Can any-one tell me what I’m doing wrong here? There has got to be something fundamental for the system to be causing ‘WebGL - GL INVALID OPERATION: Insufficient buffer size’ issues with only five or so elements on screen. There has got to be something fundamentally wrong with the styles being mangled so badly.

All these errors occur after ‘Build and Run’ and never in the editor itself.

I’ve reported the issue to Unity and filed a bug report, but having heard nothing from them for a week so I thought I’d turn to you guys for help.

Happy to provide any information you might require.

Project files are here; https://cols-general-stuff.s3.eu-west-2.amazonaws.com/WBTCutDown.rar (331 KB)

I notice that the project you supplied is using Unity 2019.4. I believe the runtime UI system is only designed to properly work in 2020.1 and later unfortunately due to some behind the scenes stuff in that version, unless those changes get backported into the 2019 LTS. Your second image also looks like the generated mesh behind the scenes is being corrupted, which I suspect might be due to you also doing a WebGL build? I updated your supplied sample to 2020.1.0b13 using the UIElements runtime 0.0.4-preview package and it seems to work fine in Editor, although I don’t have the WebGL build pipeline set up myself to test it in a browser.

Perhaps you could try installing the 2020.1 beta, create a copy of your project and upgrading the copy to that. If it works there, then it’s a Unity version issue and you’ll just have to work from 2020 when it releases or wait for the 2020 LTS. If it still doesn’t work and corrupts, then it’s a WebGL issue with the UIElements runtime package. In that case, I think it might be a while before you get a fix, as I feel that the Unity team are mainly focussing on PC and mobile usage at the moment, although I’d love to be proven wrong.

Thanks for your advice.

I’m such an idiot - I upgraded to the beta and then the alpha when that didn’t work, when trying to solve the ‘WebGL - GL INVALID OPERATION’. When I’d sorted that I reverted to the 2019 build when cutting down the project as my original project was in 2019. I’ve just taken your advice and the 2020 beta build doesn’t suffer from the Mesh corruption issue…!

While I’m annoyed at my own stupidity, I really do appreciate you chipping in with your help! Thanks :slight_smile:

This is a known issue with WebGL builds, we’re looking into it.

1 Like

Are you looking into the mangled styles or the ‘GL_INVALID_OPERATION: Insufficient buffer size.’ issue, or both? (The error message has changed from ‘WebGL - GL INVALID OPERATION: Insufficient buffer size’ in 2020.1)

Having got the style mangled issue solved by upgrading to latest 2020.1.beta as soon as I change anything the ‘GL_INVALID_OPERATION: Insufficient buffer size.’ returns.

I’ve updated the project files to show the ‘GL_INVALID_OPERATION: Insufficient buffer size’.

The difference that I’ve added was to stretch the central column of the menu. Added ‘stretch’ class to the screen element and height:auto to the child elements.

https://cols-general-stuff.s3.eu-west-2.amazonaws.com/WBTCutDown.rar (330 KB)

I was referring the the WebGL buffer issue that causes visual artifacts. There are some particular limitations on WebGL that causes these issues.