css - 转换比例导致间隙/线

Question

我目前正在构建一个网站，但遇到了 transform: scale 的问题。我有一个按钮，当用户将鼠标悬停在它上面时，会发生两件事:

1. 背景以对 Angular 线“扫过”
2. 按钮标签颜色改变
3. 按钮稍微变大

我已经开始工作了，它看起来非常好，但是在实现第 3 点之后，当按钮变大时，我看到左侧有一个奇怪的间隙。

这是我的代码:click for demo

HTML

<a href="#" class="button">Hover</a>

CSS

body {
    text-align: center;
    padding-top: 10%;
}

.button {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    border: 3px solid green;
    color: green;
    position: relative;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 20px 35px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

.button:hover:before {
    transform: translateX(0);
}

.button:hover {
  color: white;
  transform: scale(1.1);
}

这是我看到的差距的屏幕截图。此问题出现在 Chrome 和 Safari 中(我没有测试过 Firefox 或 IE，因为我无法在工作中下载它们)。

Screenshot of weird gap

Answer 1

它“仅”出现在 Chrome 而不是 Firefox(编辑:在 Edge 中更糟:首先它在左侧然后在底部...)。不确定是否是舍入错误或其他原因导致了这个差距，但我发现用 box-shadow 替换 border 可以改善渲染效果。
在过渡结束时仍然可以看到一个间隙，但最终消失了，所以我在 :hover 上添加了 2 个框阴影:新的插入并填充了 "border 之间的间隙/box-shadow" 和内容框更快。

代码笔:http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100

body {
    text-align: center;
    padding-top: 10%;
}

.button {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    transition: all ease .25s;
    box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
    color: green;
    position: relative;
    overflow: hidden;
    z-index: 2;
    font-family: sans-serif;
    padding: 19px 34px;
    text-decoration: none;
}

.button:before {
    content: ' ';
    transition: transform ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

.button:hover:before {
    transform: translateX(0);
}

.button:hover {
  color: white;
  box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
  transform: scale(1.1);
}

<a href="#" class="button">Hover</a>

编辑:使用转换后的大小:伪

.button:before {
  content: ' ';
  transition: all ease-out .25s;
  width: calc(200% + 6px);
  height: calc(100% + 6px);
  position: absolute;
  top: -3px;
  left: -3px;
  transform-origin: 0 3px;
  z-index: -1;
  transform: skewX(-45deg) translateX(-100%);
  background: green;
}

考虑到边框，但由于 overflow: hidden 而不会改变任何内容。

所以这是我的第三次尝试:通过添加一个容器(或将 A 元素作为容器)并将边框保留在子元素上，它使间隙消失(溢出在边框周围)。

代码笔:http://codepen.io/PhilippeVay/pen/ZBbKWd

body {
    text-align: center;
    padding-top: 10%;
}
a {
  display: inline-block;
  overflow: hidden;
    background: transparent;
    transition: all ease .25s;
    color: green;
    position: relative;
    z-index: 2;
    font-family: sans-serif;
    text-decoration: none;
}
a > span {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    border: 3px solid green;
    padding: 20px 35px;
}

a:before {
    content: ' ';
    transition: all ease-out .25s;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    z-index: -1;
    transform: skewX(-45deg) translateX(-100%);
    background: green;
}

a:hover:before {
    transform: translateX(0);
}

a:hover {
  color: white;
  transform: scale(1.1);
}

<a href="#" class="button"><span class="bd">Hover</span></a>

Fx 完美过渡到最后……并通过在右侧添加 2px 来“修正”宽度。但它已经在你的 jsbin 中可见，所以这是另一个故事(我想不那么烦人，因为用户会点击恕我直言)