css3 - CSS过渡效果导致文字模糊或抖动？

问题描述

直接上gif图吧：

代码：

模版：

<template id='dropdown'> <p :class='[extClass, {’open’: open}]'> <p @click='open = !open'> <input :value='currentItem.name' readonly='readonly'> <i class='bk-icon icon-angle-down dropdown-icon'></i> </p> <transition name='toggle'> <p v-show='open'><ul> <li v-for='(item, index) in list' @click='selectItem(index)'> <p class='text'>{{ item.name }}</p> <p v-if='tools !== false'> <i v-if='tools.edit' @click='editFn(index)'></i> <i v-if='tools.del' @click='delFn(index)'></i> </p> </li> <li 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;*/ } }

去掉了一些不相关的样式，现在已知的情况是在Chrome中下拉框右侧小三角的过渡效果导致文字模糊和抖动的，如果给加上backface-visibility: hidden;，文字不会抖动，但是依然模糊。在Firefox下文字会有看似一像素的加粗，不过我觉得可以接受了，反而是IE9下不会有这种问题。。求大神指导！

问题解答

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

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

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