Safari browser & Babylonjs GUI buttons

I’ve been searching for well over an hour, but I cannot figure out why my AdvancedDynamicTexture FullscreenUI buttons are not appearing using Safari, iOS or macOS.

It works as expected under Firefox, both local and website served.

Can someone give me a hint what to try? Playground GUI examples (on which my code is based) work as expected in Safari, so I’m guessing it’s some HTML thing. I know this is not the proper place for HTML questions, but it is in the context of Babylonjs.

Hello! Can you post a link to the playground you are working on? :slight_smile:

Does this example not work? https://playground.babylonjs.com/#XCPP9Y#1

I’m developing on a local server in Windows 10.

The playground link is one of the examples I tested on Safari. Button shows as expected. Site freezes when I click the button (on iPad).

This is what I get on iphone

Same on my iPad.

A simplified version of my code runs as expected in the Playground. Gonna try a few more tests.

It has something to do with the STACKED PANEL. It works fine in Firefox, but Safari doesn’t like it.

Here is original chopped up code in PG, using stacked panel for GUI:
https://playground.babylonjs.com/#BTXXMK

Here, I remove the stacked panel and the button displays in Safari as expected. https://playground.babylonjs.com/#BTXXMK#1

This is development/learning code, so maybe my use of the STACKED PANEL is in some way unorthodox and causing an issue.

I’m gonna re-code without the stacked panel (it’s a relic from another script and not needed here), but I’ll report this as a BUG if someone more knowledgeable can verify that it’s a BUG and not bad coding on my part.

OK…so removing the STACKED PANEL in my real script did not work. Worked fine in the PG example, so now I’m really confused.

Ugh. Thanks to anyone who looked and did not make fun of me. Simple padding problem. Padding worked fine on Firefox Win 10, but got pushed way off screen in Safari.

Not sure why the padding on the container (or button) would push it off screen in Safari but not in Firefox. Seems like the GUI does not resize correctly with the window in Safari, either. Firefox Win 10 resizes as expected.

No worries, we are between polite and kind people
Can you check if this works correctly with Chrome?

Thanks @msDestiny14 & @Deltakosh . This is a great forum and Babylonjs is a dream come true.

I will do more testing (and learning) and report back ASAP. I’m switching to a simple mesh for my UI until I learn how to use the built in GUI better.

@Deltakosh Chrome on Windows or Mac? I supposed I should test both if I’m really getting into this. Which I am. :smile:

1 Like

Ok thanks!