Hi
I’m developing a WebXR project. I’m using DOM Overlay feature to display my UI and I want users to be able to type some text into an input element. The UI works great for every other element, but it starts to flicker when I type into the input element.
I can’t really reproduce the issue in the playground, because my website is build using VueJS framework and my DOM overlay is a VueJS component styled with Tailwind CSS.
I’ve been trying to solve this for the past two days and I’m out of ideas. Has anyone encountered a similar issue and was able to solve it?
I haven’t tried an input element. Can you share a repo to reproduce? I found the browsers were a bit finnicky, but it’s been a while since I used the DOM overlay feature. Is it all browsers?
2 Likes
I created a repository, that recreates the issue. I’m running it in Chrome mobile browser 117.0.5938.140, because other browsers don’t support WebXR, on Samsung A52s 5G.
I checked out the code. You’re using v-show, so the element is just hidden when you pass it to the DOM overlay. I wonder if you left the “v-show” out if it would make a difference and instead try different CSS like “visibility:hidden” vs. “display:none” vs. “opacity:0” for initial state. v-show toggles the display and I think visibility may work better. Also, I would try inlining the div with element (not using a component), since the docs state that v-show does not support the <template> element.
I’ll be at a computer on Thursday and can check properly, but if none of those work we can try some other things. I did find that browser support wasn’t as good as I was expecting.
I tried everything you suggested and I still get the same results. I also tried it without hiding the input element, before launching into AR mode and it’s still flickers when I type. I did some more searching and I got some clues that the issue might that the rendering of the canvas and the HTML elements is not synchronized, since the input element has to be redrawn for every letter. That’s my understanding at least, but my knowledge here is very limited so this might be a total shot in the dark. It could also just be that my phone is not powerful enough.
I’m attaching a gif of what it looks like on my device, in case it gives you any clues as to what might be the problem. It’s a bit low res, but it shows what the problem is. It happens a bit randomly, so here it’s mostly visible when I delete the text.
I really appreciate you taking the time to help me. This is the final piece of my project and I hope to demo it soon. Functionally it works perfectly, but the visual presentation is a bit jarring.
1 Like
Some more information. Today during my testing I noticed that the flickering happens when the input field is not full. Once it’s full of text the flickering stops, but it still happens when I start deleting the text, no matter how full the input is.
Also, the whole UI flickers, not just the input element.
I thought that it’s maybe related to the reactivity of Vue, because I had a variable connected to the input element via v-model. I removed it and the issue remains.
i’m testing it now as well. thanks for sharing!
Just tested that with native WebXR (without babylon at all) - this seems to be an issue with the browser and not directly related to babylon.
Probably a browser issue…
1 Like
Oh, that’s unfortunate. I’ll keep at it for some time, otherwise I’ll go speech to text. If I manage to find a workaround I’ll reply here, if anyone in the future has a similar problem.
Thanks for taking the time, I really appreciate it!
3 Likes