使用转换会导致 Safari 中字体大于边界框的工件

问题描述

我们有这种字体，字体的边界框很小。我们正在使用拆分文本来为文本块设置动画，但我已删除所有这些以最小化演示并直接包含 HTML。

如果我使用 translate3d，那么某些字符会在 safari 中被剪切，仅使用 translate 有时不会导致伪影，但如果您选择第三个字符，则会看到剪切问题。如果我为 translate 或 translate3d 设置动画，则文本会被剪切。我认为这是浏览器的渲染错误，是否有解决此问题的方法？

@import url("https://fonts.googleapis.com/css2?family=Allura&display=swap");

html {
  background: #323436;
  color: #f1f1f1;
  font-family: Sans-Serif;
  text-align: center;
  padding: 25px;
}

#text {
  font-size: 140px;
  line-height: 140px;
  font-family: "Allura";
  display: block;
  position: relative;
  top: 50px;
}

#text  div{
  border: solid 1px red;
  transform: translate3d(0px,0px,0px) scale(2,1);
/*   transform: translate(0px,1); */
/*   animation: scaleit 1s; */
/*   animation: scaleit3d 1s; */
}

@keyframes scaleit{
  from{
    transform: translate(0px,1);
  }
  to{
    transform: translate(0px,0px) scale(1,1);
  }
}

@keyframes scaleit3d{
  from{
    transform: translate3d(0px,1);
  }
  to{
    transform: translate3d(0px,1);
  }
}

<div id="text">
  <div style="position: relative; display: inline-block;">R</div>
  <div style="position: relative; display: inline-block;">i</div>
  <div style="position: relative; display: inline-block;">s</div>
  <div style="position: relative; display: inline-block;">k</div>
  <div style="position: relative; display: inline-block;">e</div>
  <div style="position: relative; display: inline-block;">B</div>
  <div style="position: relative; display: inline-block;">o</div>
  <div style="position: relative; display: inline-block;">u</div>
  <div style="position: relative; display: inline-block;">d</div>
  <div style="position: relative; display: inline-block;">o</div>
  <div style="position: relative; display: inline-block;">i</div>
  <div style="position: relative; display: inline-block;">r</div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）