变换比例导致间隙/线条

Question

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

1. 背景“扫过”对角线
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 中更糟：首先它在左侧，然后在底部......）。不确定是否是舍入错误或其他原因导致了该差距，但我发现将border 替换为box-shadow 可以提高渲染效果。
在过渡结束时仍然可以看到一个间隙，但最终消失了，所以我在 :hover 上添加了 2 个框阴影：新的插入并填补了 "border/box-shadow" 和 内容框 更快。​​

Codepen：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 元素作为容器）并保持子元素上的边框，它使间隙消失（溢出在边框周围）。

Codepen：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 中可见了，所以这是另一个故事（我想用户会在我之前点击，所以不那么烦人）