CSS翻译动画副作用

时间:2017-10-16 16:24:10

标签: css css-animations translate-animation

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

我使用了transform:translate(-50%, - 50%);最高:50%;左:50%;它确实起到了作用,但在一些对话高度上也有副作用,在不同的浏览器上显示不同:

  • Firefox - 对话底部边框消失(可以在浏览器上测试,但不能在jsfiddle上看到)。选择箭头下方的额外像素。标签背景是边框上方的一个像素。
  • Chrome - 边框宽2像素,模糊不清。
  • Explorer 11 - 标签高度增加1px。

请帮助我否定这种副作用。

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

JSfiddle Demo

<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>
add([],_,_,_,[]).
add([H|T],E,P,C,[H,E|TR]) :-
   P =:= C, 
   C1 is C+1,
   P1 is P*2,
   add(T,E,P1,C1,TR).
add([H|T],E,P,C,[H|TR]) :-
   P =\= C,
   C1 is C+1,
   add(T,E,P,C1,TR).

2 个答案:

答案 0 :(得分:0)

添加前缀时是否有效?

.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%);
}

答案 1 :(得分:0)

这似乎是对话框的浮动宽度和高度的舍入问题。在奇数高度数字上不需要舍入 - 一切都很好。在偶数高度数字上,结果高度为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'
});