CSS卡翻转毛刺（填充？保证金？）

Question

我正在尝试创建交互式日历。我添加了一个巧妙的CSS卡片翻转动画(tutorial here)来翻转日历日期并在卡片背面显示更多信息。

如果将鼠标悬停在日期上方会出现问题，由于某种原因，框顶部会出现一个突出显示的小白条。我似乎无法弄清楚如何解决它（下图中的红色箭头表示问题）。

这是一个CodePen和HTML来说明问题。我不确定CSS代码的哪一部分导致了问题。 http://codepen.io/ipiyale/pen/Athfd?editors=110

<div class="col-lg-2 col-md-4 col-xs-6 thumb flip-container">
    <div class="thumbnail flipper">
        <div class="day front"><h2>1</h2></div>
        <div class="activity back">
            <p>Afternoon Activity</p>
            <p>Evening Activity</p>
        </div>
    </div>
</div>

有什么建议吗？

Answer 1

问题是由padding: 4px;类的.thumbnail造成的。

.thumbnail是一种内置的Bootstrap风格。您最好的选择是覆盖自己CSS中的填充。

要查看此内容，请打开浏览器检查器（在Chrome中，右键单击并选择“检查元素”），您将看到.thumbnail类的填充为4px。如果取消选中该样式，您将看到问题消失。

我在这里发布了你的演示分支。您可以看到CSS底部附近我添加了填充覆盖：http://codepen.io/anon/pen/eHKma

.thumbnail {
    padding: 0;
}

Answer 2

使用backface-visibility似乎有所帮助。

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
}

通过How to fix flicker when using Webkit transforms & transitions

另一种解决方案涉及移动导致闪烁的元素。请参阅Flickering div when using CSS transform on hover。