When I use the @ babylonjs/gui package of ES6, I draw a full screen DisplayGrid and add a Button using GUI. When I pass the Button continuously with the mouse, I see a black rectangular box around it. I cannot reproduce this problem in the commonjs package or the playground, but I can reproduce it in the @ babylonjs/gui package. You can download the project file I uploaded for testing
gui-babylon.zip (21.8 KB)
cc @amoebachant
Thanks for the report too @RichardFly! I’ll also look into this one Wednesday. Have a great day!
Hi @RichardFly, I was able to repro with the zip you sent, thanks! It seems that the difference between the repro app and the playground is that the repro sets adaptToDeviceRatio to true when creating the engine. It seems that it only repros on Mac (in both Safari and Chrome) but not on a PC. Can you try not setting adaptToDeviceRatio to true and confirm that it no longer repros on your end as well? Thanks!
Yes, exactly what you said ! I am using Mac (in Edge) now.When I set the adaptToDeviceRatio to false, the problem was not happened!
Is that an issue should be fixed?
I’m still investigating - actually I found that it repros on my PC as well, I just needed to change my device scale to something other than 100%. Once I get to the root cause we’ll determine what the right fix is. In the meantime, hopefully this serves as a workaround for you!
Thanks!
Hi @RichardFly, got an update for you on this. We’ve tracked the issue down to an optional optimization which is calculating the clipping rectangle slightly off when the display’s scale isn’t 100%. If you add this to your code, you’ll bypass the optimization with that issue:
advancedTexture.useInvalidateRectOptimization = false;
This should be a good workaround for you, and I’ll continue to look into fixing that optimization to handle this case.
Thanks!
