奇怪的CSS伪/ Chrome行为

Question

我遇到了CSS伪元素::之前的奇怪行为。它应用于容器div（位置相对/父div）并具有静态位置（px），但在缩放窗口时它表现为基于％的位置。 （见图1）

使用Chrome的开发者控制台时，元素的位置与我预期的完全相同。它不会在那里渲染。 （见图2）有时甚至渲染两次。

代码很好，适用于其他页面，没有其他浏览器有问题。只是这个页面。请参阅：https://jsfiddle.net/qedx9nju/

HTML：

<div class="mod-form__container mod-form__container--email" ng-if="!lead.step || lead.step == 3">
  <label class="mod-form__label" for="email">Email</label>
  <input class="mod-form__input"
  ng-model="lead.email"
  id="email"
  name="email"
  placeholder="Hierop ontvang je de leads"
  type="email"
  ng-class="{ 'error': (quoteForm.email.$invalid && (quoteForm.email.$touched || quoteForm.$submitted)) }"
  nk-email required="">       
</div>

LESS：

.mod-form {

&__container {
  float: left;
  width: 100%;
  font-size: 0;
  margin-bottom: 10px;

&::before {
  position: absolute;
  top: 30px;
  left: 13px;
  font-size: 14px;
  font-family: 'FontAwesome';
  z-index: -1;
}

&::after {
  position: absolute;
  top: 30px;
  right: 13px;
  font-size: 14px;
  font-family: 'FontAwesome';
  z-index: -1;
}

&--email {
  position: relative;

&::before {
  content: '\f0e0';
}

& input {
  padding-left: 38px;
}
}
}

&__label {
  display: block;
  float: left;
  width: 100%;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 5px;
}

&__input {
  border: 2px solid #C4C4C4;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 14px;
  background-color: transparent;

&::-webkit-input-placeholder {
  color: #C4C4C4;
  font-size: 14px;
}
&::-moz-placeholder {
  color: #C4C4C4;
  font-size: 14px;
}
&:-ms-input-placeholder {
  color: #C4C4C4;
  font-size: 14px;
}
&:-moz-placeholder {
  color: #C4C4C4;
  font-size: 14px;
}

}

}

图片

Chrome版本62.0.3202.94 - MacOS

问题：什么会导致这种行为？或者我该如何调试呢？

Answer 1

尝试将元素包装在相对定位的div中，因此： https://jsfiddle.net/qedx9nju/3/

my.id = \u00D6ffnen Express WebTools

Answer 2

这似乎是Chrome中的重绘问题。 FontAwesome的重型动画（fa-spin）杀死了伪元素的重绘。

为了将正确的重绘功能恢复到:: before元素，我使用了translate3D技巧来让GPU加快速度。

&::before {
  -webkit-transform: translate3d(0, 0, 0);
}