CSS 翻译动画副作用答案

【问题标题】：CSS translate animation side effectsCSS 翻译动画副作用
【发布时间】：2018-03-28 05:50:09
【问题描述】：

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

我使用了 transform: translate(-50%, -50%);最高：50%；剩下：50%；它确实有效，但在某些对话高度上也会产生在不同浏览器上出现不同的副作用：

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

请帮我消除这种副作用。

这种副作用可以在下面的示例中看到。通过将对话元素高度向上或向下更改 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>

【问题讨论】：

标签： css css-animations translate-animation

【解决方案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%);
}

【讨论】：

很遗憾没有。我的生活环境中有这些前缀，我也有同样的效果。

【解决方案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'
});

【讨论】：