css3 – CSS-Übergangseffekte, die dazu führen, dass Text unscharf oder zittert?

Question

Laden Sie einfach das GIF hoch:

Code:

Vorlage:

<template id="dropdown">
  <p class="dropdown" :class="[extClass, {'open': open}]">
    <p class="dropdown-wrapper" @click="open = !open">
      <input class="dropdown-selector" :value="currentItem.name" readonly="readonly">
      <i class="bk-icon icon-angle-down dropdown-icon"></i>
    </p>
    <transition name="toggle">
      <p class="dropdown-list" v-show="open">
        <ul>
          <li class="dropdown-list-item" v-for="(item, index) in list" @click="selectItem(index)">
            <p class="text">{{ item.name }}</p>
            <p class="tools" v-if="tools !== false">
              <i class="bk-icon icon-edit dropdown-list-icon" v-if="tools.edit" @click="editFn(index)"></i>
              <i class="bk-icon icon-close1 dropdown-list-icon" v-if="tools.del" @click="delFn(index)"></i>
            </p>
          </li>
          <li class="dropdown-list-item" v-if="hasCreateItem" @click="createFn">
            <p class="text">
              {{ createText }}
            </p>
          </li>
        </ul>
      </p>
    </transition>
  </p>
</template>

CSS:

  .toggle-enter-active,
  .toggle-leave-active{
    transition: transform .3s cubic-bezier(.23, 1, .23, 1), opacity .3s cubic-bezier(.23, 1, .23, 1);
    transform-origin: center top;
  }

  .toggle-enter,
  .toggle-leave-active{
    transform: translateZ(0) scaleY(0);
    opacity: 0;
  }

.dropdown{
    position: relative;
    width: 100%;
    &.open{
      border-color: #57a3f1;
      .dropdown-icon{
        transform: translateZ(0) rotate(180deg);
      }
    }
    &-icon{
      position: absolute;
      top: 13px;
      right: 10px;
      font-size: 12px;
      color: #d3d3d3;
      transition: transform linear .2s;
      /*backface-visibility: hidden;*/
    }
  }

Einige irrelevante Stile wurden entfernt. Es ist jetzt bekannt, dass der Übergangseffekt des kleinen Dreiecks auf der rechten Seite des Dropdown-Felds dazu führt, dass der Text unscharf wird und zittert , aber es wird immer noch verschwommen sein. Unter Firefox erscheint der Text um einen Pixel fett, aber ich halte das für akzeptabel. Im Gegenteil, unter IE9 tritt dieses Problem nicht auf. . Bitten Sie Gott um Führung! backface-visibility: hidden;

Answer 1

发现是transform: translate(-50%, -50%)导致抖动和模糊，改成transform: translate3d(-50%, -50%, 0)会解决一部分问题，主要是transform：translateZ(0)的功劳。但是所有文字还是会有一定程度的模糊，不知道是为什么？？

----------------update-----------------
又整理了一下代码，现在的情况是这样的，当给dialog-wrapper加上transform:translate3d(-50%, -50%, 0)的时候，文字不会抖动了，但是会模糊。如果给下拉框的小三角加上backface-visibility: hidden;文字也不会抖动，但也还是模糊。我看下再写一个简单的demo来更好的解释这个问题吧。。这个问题在项目中经常出现，一直没找到适合的解决方案。。

Answer 2

把translateZ(0)去掉，把硬件加速停掉