Question

我有一个标题，当用户位于页面顶部时，该标题具有透明的bg和白色文本，而当用户滚动/在页面的任何其他位置时，该标题具有白色的bg和蓝色文本。

在页面加载时，透明度和字体颜色按预期工作，但是如果我稍微滚动一下并快速滚动回到顶部，则会发生奇怪的情况。标题背景保持白色，文本显示为文本笔划，仅轮廓显示为蓝色。好像回到原始的透明/白色状态的过渡已经停滞了一半。这仅在iOS上的Safari中发生。

我尝试了各种方法在Safari中渲染透明背景，但是我认为这不是问题。我尝试将-webkit-font-smoothing: subpixel-antialiased;添加到透明元素中，但事实并非如此。我认为这可能与用户滚动或CSS转换标题背景和文本时发生的限制有关。

以下是标头及其透明变体的一些SCSS：

.o__header {
  position: fixed;
  top: 0;
  padding: 6px 15px;
  width: 100%;
  height: $header-height;
  background-color: $white;
  z-index: 100;
  display: flex;
  justify-content: center;

  @include media-breakpoint-up(md) {
    background-color: $header-background-color;
    transition: background-color .3s linear;
  }

  &--transparent {
    background-color: rgba(255, 255, 255, 0);

    @include media-breakpoint-up(md) {
      transition: background-color .3s linear;
    }
  }

  .main-menu > .menu-item {

    &.transparent a {
      color: $blue;
    }
  }
}

.main-menu > .menu-item a {
  color: $white;
  text-transform: none;
  transition: opacity .2s ease-in-out;
}

这是控制两种状态之间过渡的js：

const headerClass = 'o__header--transparent'
window.addEventListener( 'scroll', throttle( checkIfOnTop, 20 ) )

  /**
   * Manages header and hero states based on scroll position.
   */
  function checkIfOnTop () {
    const initialHeight = 10
    const heroHeight = 273

    /**
     * Toggle header transparency based on position.
     */
    function checkScrollPosition () {
      if (
        $( window ).scrollTop() <= initialHeight &&
        !header.classList.contains( headerClass )
      ) {
        header.classList.add( headerClass )

        for ( let i = 0; i < menuItems.length; ++i ) {
          menuItems[i].classList.add( 'transparent' )
        }

      } else if (
        $( window ).scrollTop() > initialHeight &&
        header.classList.contains( headerClass )
      ) {
        header.classList.remove( headerClass )
        hasChildren.classList.remove( 'transparent' )

        for ( let i = 0; i < menuItems.length; ++i ) {
          menuItems[i].classList.remove( 'transparent' )
        }
      }
    }

如何修复iOS Safari上的字体渲染错误

0 个答案: