变换比例导致间隙/线

Question

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

1. 背景对角线“扫过”
2. 按钮标签颜色变化
3. 按钮略微增长

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

这是我的代码：点击演示

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，因为我无法在工作中下载它们）。

奇怪的间隙截图

Answer 1

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

代码笔：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>

编辑：玩转的大小：pseudo

.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

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

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

Fx 完美地过渡到最后......并通过在右侧添加 2px 来“纠正”宽度。但它已经在你的 jsbin 中可见，所以这是另一个故事（而且我猜用户会点击然后不那么烦人）