WebKit 上的 CSS 文本样式错误

Question

我有这个页面，其中有一个 JavaScript 脚本，可以更改 H1 和 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)
  }
}

它的作用类似于 Spotify Wrapped。当时间结束或点击屏幕一侧时，文本会发生变化以匹配 Wrapped 的下一部分。它在桌面 Google Chrome 中看起来不错（即使是垂直纵横比），但在我的 iOS 手机上测试时，所有浏览器都使用 Apple 的 WebKit，文本显示不居中，有时在更改时部分文本会出现在屏幕之外；就好像文本的理由没有正确更新一样。

似乎将手机屏幕旋转到水平位置，然后再次旋转它可以解决问题，但这不是预期的行为。我还在 macOS 的 Safari 上尝试过，它也使用相同的技术。所看到的行为与我的手机上相同。如果我调整窗口大小，它会自动修复（直到下一部分，该错误再次出现）。

基于此，我猜测这是与 WebKit 相关的问题，因为在桌面 Google Chrome 上尝试此操作的行为符合预期。

为了展示这个问题，我制作了两个部分：一个是短标题和文本，另一个是长标题和文本。第一部分正常显示，但是当我们转到第二部分时，我们可以看到它有点偏向右侧，并且边距被忽略

屏幕记录

Answer 1

body {
background-color: #000;
color: #fff;
 padding: 0px 20px;
}
h1, p {
 text-align: center;
 word-break: break-word;
}

   <body>
    <h1>Title for the Loooooooooooooooooooooooooooong Example Section
</h1>
    <p>This is an example text for this section to show my issue to StackOverflow.</p>
   </body>

尝试这个用于移动视图的 CSS 代码

WebKit 上的 CSS 文本样式错误

问题描述投票：0回答：1

1个回答

最新问题

WebKit 上的 CSS 文本样式错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1