即使 DevTools 正确显示，按钮图标也无法在 iPhone X 中正确呈现

Question

我为我的应用程序创建了 Scroll to top 按钮，当我在我的 Chrome 和 Safari DevTools 中测试它时，它在所有设备上都能正确显示：

但是，当我在 iPhone X 中打开它时，按钮内的图标显示不正确（即使 Chrome 和 Safari DevTools 显示 iPhone X 会正确显示）：

这里是HTML:

<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}">
  <button class="scroll-to-top-button" (click)="scrollToTop()">
    <i class="fa fa-chevron-up scroll-to-top-arrow"></i>
  </button>
</div>

这里是CSS:

.scroll-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  color: white;
}
.show-scrollTop {
  opacity: 1;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
}
.scroll-to-top-button {
  background-color: #7496ee;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  color: white;
}
.scroll-to-top-button:hover {
  background-color: darken(#7496ee, 5%);
}
.scroll-to-top-arrow {
  font-size: 30px;
}

我还想提一下，这是一个 Angular 应用程序。

Answer 1

我通过明确指定按钮的内容必须居中解决了这个问题（我还删除了按钮的填充，但我想这对修复并不重要）：

.scroll-to-top-button {
  background-color: #7496ee;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center !important;
  padding: 0 !important;
}

它在 DevTools 上工作但在 phone 上不工作仍然很奇怪（它就像它位于 phone 的右侧）。

即使 DevTools 正确显示，按钮图标也无法在 iPhone X 中正确呈现

Button icon does not render properly in iPhone X even if the DevTools displays it properly

html

css

mobile

ios

angular