Dom element has random position when loading from cache

Phaser 3
1

Hello,
I load dom to cache (in scene preload func):

this.load.html('main-menu', 'html-modules/main-menu.html');

then add it to scene (in scene create func):

this.mainMenu = this.add.dom(0,0).createFromCache(‘main-menu’);

my main-menu.html:

<style>
.menu-container{
    display: flex;
    flex-direction: column;
}
</style>
<div class="menu-container">
  <img src="img/gui/play.png">
  <img src="img/gui/shop.png">
  <img src="img/gui/settings.png">
  <img src="img/gui/remove-ads.png">
</div>

But my html is positioned randomly. Sometimes it is centered as if I setOrigin(0), and sometimes it is in default origin (centered). So one time it is centered at 0,0, and next time I refresh page it is shifted…Please look at attached images…

When I swithed images in html to input (with type=“image”), it gives me same restuls…
Please help.
Thanks!

1
11264×972 193 KB
2
21286×968 194 KB