HolographicButton in Ionic 5.8 app mouse events away from button


Wonder if anyone here have found an issue like this. I’m trying to use babylonjs 4.2.0 on an Ionic 5.5.2 app. Nothing too complex just trying to use a SpherePanel with HolographicButtons as shown in the here: https://playground.babylonjs.com/#REI582#3 however when using Ionic all mouse events for the buttons have an offset.

What I mean by this is, if you click or hover the mouse over the button nothing happens, however hovering and clicking on an area (the size of the area depends on the scale factor) near the top left corner of the canvas (outside the boundaries of the SpherePanel) does work. So if you want to click a button you have to click somewhere in the top left corner. This is a scrennshot of hovering Screenshot-from-2021-11-06-18-45-08 — ImgBB

This odd behaviour is only present in the ionic app. I suppose that this happens because the canvas is inside an ionic container and inside a grid but after few hours searching, I could not find how to solve this anywhere.

Please if you have any hint on how may I solve this I will appreciate it very much. Thanks.

Adding @PolygonalSun for the inputs and @RaananW who might know IONIC ?

I haven’t used ionic in ages…

But - it does feel like there is some container over the canvas that doesn’t pass the pointer events. I am not sure about the HTML structure you are using (and if you can share it, or a reproduction of it, it would be great).
A simple test would be to set all elements except for the canvas to have pointer-events: none; in their css definitions. This will force pointer events to “pass through”. It’s not a solution (i.e. not the best solution to set everything to have this property), but it will tell you if this is the issue.


Hi @jlrueda have you had the opportunity to try out @RaananW 's suggestion? :smiley: