Text not displaying properly on Ubuntu core

I am trying to deploy a kiosk on Ubuntu-core. The front-end is developed on vue and is running in a docker container.
At places the text is over lapping and in some places it is shifted to the right.

This is how they are displayed while running on ubuntu 20

Screenshot from 2021-09-01 20-18-27

I have tried using wpe-webkit-mir-kiosk, mir-kiosk-chromium and a custom electron app, but all are facing the same issue (on wpe-webkit-mir-kiosk the font is shifted down that is the only difference). I have also tried both mir-kiosk and Ubuntu-frame.

In the snapcraft.yaml for the electron app gnome-3-38 extension is being used and the following is also set:

/usr/share/fonts:
bind: $SNAP/gnome-platform/usr/share/fonts

Does anyone know what might be causing this?