CSS 翻译动画副作用

Question

我正在尝试将我的对话置于屏幕中间。我不知道对话的高度或宽度（以后 JS 可能会添加新元素）。对话的大小必须取决于它的内容。

我使用了转换：translate(-50%, -50%);与顶部：50%；剩下：50%；它完成了它的工作，但在某些对话高度上也有副作用，在不同的浏览器上显示不同：

Firefox - 对话底部边框消失（可以在浏览器测试中看到，但在 jsfiddle 上看不到）。 select 箭头下方的额外像素。标签背景比边框高出一个像素。
Chrome - 边框为 2 像素宽且模糊。
Explorer 11 - 标签高度增加 1px。

请帮我消除这个副作用。

可以在下面的示例中看到这种副作用。通过将对话元素的高度向上或向下更改 1px，效果消失。

.radio label {
  padding: 4px 11px;
  border: 1px solid #000;
}
.radio label.checked {
  background-color: #0275b8;
}
select {
  border: 1px solid #000;
  margin-bottom:20px;
}
.dialogue {
  padding: 10px;
  border: 1px solid #000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="dialogue" style="height:71px;">
  <select>
    <option>Option 1</option>
  </select>
  <div class="radio">
    <label class="checked">Option 1</label><label>Option 2</label>
  </div>
</div>

Answer 1

添加前缀是否有效？

.dialogue {
  padding: 10px;
  border: 1px solid #000;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Answer 2

这似乎是对话的浮动宽度和高度四舍五入的问题。在奇数高度数字上不需要四舍五入 - 一切都很好。在偶数高度上结果高度是 x.5px，这似乎在不同的浏览器中处理不同。

为了解决这个问题，决定使用 MutationObserver 功能定位与 JS 的对话。在加载时，只要 MutationObserver 在 HTML 中发现变化，JS 就会调用以下函数：

jQuery('.dialogue').css({
    'left': Math.round((jQuery(window).width() - jQuery('.dialogue').width()) / 2) + 'px',
    'top': Math.round((jQuery(window).height() - jQuery('.dialogue').height()) / 2) + 'px'
});

CSS 翻译动画副作用

CSS translate animation side effects

css

css-animations

translate-animation