Text moves to the left when changing <g> visibility

[Forbidden-Duck]

I'm using SDK 4.2 to make an app for Versa devices. I'm using 

<link rel="import" href="/mnt/sysassets/widgets/square_button_widget.gui" />

 for my buttons.

Before I click anything this is what it looks like.

When I click one of them and it goes to a different page and I return back to this page it looks like this.

this is the same for all the buttons

CODE FOR CHRISTMAS BUTTON

        <use id="christmasButton" href="#square-button" class="firstBtn listBtn">
            <set href="#text" attributeName="text-buffer" to="Christmas"/>
            <set href="#text" attributeName="font-size" to="24"/>
        </use>

JAVASCRIPT CODE FOR CHANGING VISIBILITY

backButton.onactivate = (event) => {
    datePage.class = "hidden";
    listPage.class = "visible";
}

christmasButton.onactivate = (event) => {
    datePage.class = "visible";
    listPage.class = "hidden";
}

I have also tried the following attributes to fix the issue

<set href="#text" attributeName="x" to="50%"/>
<set href="#text" attributeName="text-anchor" to="middle"/>

[Forbidden-Duck · Accepted solution]

I found a solution which involves not using the provided text.

The example is on the back button

        <use id="backButton" href="#square-button" class="back">
            <text class="btnText">BACK</text>
        </use>

Use <text class="btnText"></text>

.btnText {
  font-family: System-Light;
  font-size: 24;
  text-anchor: middle;
  text-length: 32;
  fill: white;
  x: "50%";
  y: "60%"
}

System-Light appears to be the font used. I can't confirm but it's very close.

50%, 60% gets it as close to centre as possible.

With this solution, the text doesn't move and is as close to a fix as I could get.