Hi, im using phaser dom for game ui. and to be precise im using div and set in css border image to achieve the effect of pixel art borders with functionality to resize div no matter how big content is inside., this is extremely handy, especially in speech ballons.
But each time i add border image, borders will break and leave gap like in image.
I tried to reproduce this bug outside of phaser using html and css but not matter what i did i couldnt create the same problem, but i found that this happens because phaser are using css matrix() to scale dom and update it constantly.
Does anyone have solution for this or maybe some alternative what i can use
I couldn’t find any info about this on internet so i think this is phaser problem because in each loop it updates the position of dom and css just cant fast enough calc all info, because when i turn off update everything is okay.
In case that someone needs this in the future this are the options.
use phaser render and not use dom at all.
use css images as samme mention, like background image that is static, but you will lose freedom to resize everything dynamicly so you will need to prepare more sizes (same would be in render).
use before and after to place image top and bottom, but widht must remain always the same.
add css 8 images (bottom border, top border, left border,right border and 4 corners) in the div and place them with absolute position around the div.
use multiple background images in the same div to simulate border but you will not be able to create corners.
