Html – CSS Text styling bugging on WebKit

I’ve got this page, that has a JavaScript script that changes the text of an H1 and a p.

const slide_data = {
  1: {
    text: "Example",
    sub: "This is an example text.",
    time: 10
  },
  2: {
    text: "Title for the Looooooooooong Example Section",
    sub: "This is an example text for this section to show my issue to StackOverflow.",
    time: 10
  }
  3: {
    text: "4",
    time: 10
  }
}

var slide_change = 1;
let currentSleep;
async function slides() {
  var header = document.querySelector('#header');
  var sub = document.querySelector('#subtitle');

  for (i = 1; i <= Object.keys(slide_data).length; i = i + slide_change) {
    var slide = slide_data[i]
    slide_change = 1
    main.style.fontSize = "4rem";
    main.style.color = "white";
    header.innerHTML = slide.text;

    if (slide.sub != null) {
      sub.innerHTML = slide.sub;
    } else {
      sub.innerHTML = ""
    }

    bar = document.querySelector(`#bar_${i}`);

    currentSleep = new Sleep();
    await currentSleep.start(slide.time * 1000, bar, bar.maxWidth)
  }
}

EDIT: Uploaded a full example on this Codepen

It works as a mock of the Spotify Wrapped. When the time is over or if you tap on the side of the screen, the text changes to match the next section of the Wrapped. It looks good in desktop Google Chrome (even with a vertical aspect ratio), but testing on my iOS phone, where all browsers use Apple’s WebKit, the text appears uncentered, and sometimes part of it outside of the screen when is changed; as if the text’s justification wasn’t updated propertly.

It seems that rotating the screen of my phone to horizontal and then turning it again as it was fixes the issue, but that is not the expected behaviour.
I’ve also tried this on macOS’s Safari, that also uses the same technology. The seen behaviour is the same as on my phone. If I resize the window it automatically fixes (until the next section, that bugs out again).

Based on this, I’ll guess that this is an issue related with WebKit, as trying this on desktop Google Chrome behaves as expected.

To show the issue, I’ve made two sections: one with a short title and text, and a long one.
The first section is shown normally, but when we move on to the second one we can see that it’s a little bit off to the right side and margins are ignored

Screen record