transform：translateY（-50％）导致IE和EDGE中的1px跳转/移位

Question

请参阅jsfiddle中的示例。 https://jsfiddle.net/0uwmxt02/1/

在IE和EDGE中，变换：translateY（-50％）导致动画开始和结束时1px上下跳跃。在Chrome中，位移仍然会发生，但它很平滑。知道导致它的原因吗？

＆＃13;

＆＃13;

.submenu-arrow-hover {
  position: relative;
  width: 200px;
  top:50px;
 }
  
 .submenu-arrow-hover:after {
    //background: rgba(155, 173, 188, 0.9);
    position:absolute;
    content:'';
    width: 1px;
    height: 28px;
    border: 1px solid red;
    border-right:0;
    border-top:0;
    top:50%;
    right:-1px;
    transform-origin: 0 0;
    transform: translateY(-50%);
    transition-duration: .3s;
  }
  
.submenu-arrow-hover:hover::after {
      //background: rgba(155, 173, 188, 0.9);
      position:absolute;
      content:'';
      width: 20px;
      height:20px;
      border: 1px solid red;
      border-right:0;
      border-top:0;
      top:50%;
      right:-1px;
      transform-origin: 0 0;
      transform: translateY(-50%) rotate(45deg);
}

＆＃13;

<div class="submenu-arrow-hover">HOVER ME</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

似乎在翻译和轮换之间存在某种混淆。要解决此问题，请尝试完全删除translateY()要求：

.submenu-arrow-hover {
  position: relative;
  width: 200px;
  top: 50px;
  
  /* outline and excess height added as a test */
  outline: 1px dotted #ccc;
  height: 100px;
}

.submenu-arrow-hover::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 28px;
  border: 0;
  border-left: 1px solid red;
  border-bottom: 1px solid transparent;
  right: -1px;
  transform-origin: 0 0;
  transition-duration: .3s;
  
  /* position top of pseudo element halfway down */
  top: 50%;
  margin-top: -14px; /* accurately centre by offsetting by half the height */
}

.submenu-arrow-hover:hover::after {
  width: 20px;
  height: 20px;
  border-bottom-color: red;
  transform: rotate(45deg);
}

<div class="submenu-arrow-hover">HOVER ME</div>

编辑：已更新，以确保箭头在父<div/>内垂直居中。

Answer 2

• 等于.submenu-arrow-hover:after height至.submenu-arrow-hover:hover::after（20px），否则高度异步将使其反弹。

.submenu-arrow-hover {
  position: relative;
  width: 200px;
  top: 50px;
}

.submenu-arrow-hover:after {
  //background: rgba(155, 173, 188, 0.9);
  position: absolute;
  content: '';
  width: 1px;
  height: 20px;
  border: 1px solid red;
  border-right: 0;
  border-top: 0;
  top: 50%;
  right: -1px;
  transform-origin: 0 0;
  transform: translateY(-50%);
  transition-duration: .3s;
}

.submenu-arrow-hover:hover::after {
  //background: rgba(155, 173, 188, 0.9);
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid red;
  border-right: 0;
  border-top: 0;
  top: 50%;
  right: -1px;
  transform-origin: 0 0;
  transform: translateY(-50%) rotate(45deg);
}

<div class="submenu-arrow-hover">HOVER ME</div>

Answer 3

我最终不得不使用jQuery，因为元素具有可变高度，并且在调整屏幕大小和元素改变大小/位置时需要调整箭头位置。

    function setMargins(arrow) {
    parentHeight = $(arrow).parent().height();  
    arrowHeight = $(arrow).height();  
    topMargin = (parentHeight - (arrowHeight - 1)) / 2 ;    
    $(arrow).css("margin-top", topMargin);    
}


$(document).ready(function(){
    $('.submenu-arrow-hover--arrow').each(function() {
    setMargins(this);
})
});

// timeout function needed as there is transition on the menu elements so
// function has to fire few milliseconds after the transitions have finished animating

$(window).resize(function() {
    setTimeout(function(){
    $('.submenu-arrow-hover--arrow').each(function() {

        setMargins(this)            
    })    
}, 600);
});

Answer 4

对于Chrome来说，this StackOverflow answer表现出色！

将其添加到已应用translateY的元素中：-webkit-backface-visibility: hidden;