为什么此变换旋转在Edge中不起作用？

如何解决为什么此变换旋转在Edge中不起作用？

我在焦点选择器内的变换旋转遇到问题。在Chrome，Opera和Firefox中可以正常运行，但在Edge中则不能运行。

正如您在代码片段中看到的那样，当您将焦点放在文本框div上时，图标会增大并且其颜色会更改（在所有浏览器中都可以完成），但是当缩放后旋转时，它不起作用在边缘。我进行了一些研究，发现一些我认为与我的问题相似的帖子：

1. CSS Animation not working in IE/Edge。
2. CSS transform is not working in Edge。
3. Transform scale not working after rotation。

但是，我认为他们都不适合这种情况。因为它只进行缩放和动画处理，但只按比例缩放，所以我认为这不是兼容性问题，否则就不会做到。

.vm-id-textbox {
  position: relative;
  order: 0;
  margin: auto 0px;

  min-width: 280px;
  width: 280px;
  height: 52px;
}

.vm-id-textbox:hover {
  cursor: pointer;
}

.vm-id-textbox:hover .textbox {
  background-color: black;

  transform: scale(1.02);
}

.vm-id-textbox:hover .edit-icon {
  color: gray;

  transform: scale(1.4);
}

.textbox {
  position: absolute;

  min-width: 280px;
  width: 280px;
  height: 52px;
  border: none;
  border-radius: 12px;

  background-color: rgba(4,4,66,0.904);

  line-height: 52px;
  font-size: 15px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px rgb(106,90,90);
  overflow: hidden;

  transition: transform 200ms ease-in;
}

.textbox[contenteditable][placeholder]:empty::after {
  content: attr(placeholder);

  opacity: 1;
  color: rgba(135,133,147,0.537);
  text-shadow: none;
}

.textbox[contenteditable][placeholder]:focus::after {
  content: "";
}

.textbox:focus {
  background-color: black;

  transform: scaleX(1.02);
}

.textbox:focus + .edit-icon {
  color: gray;

  transform: scale(1.4) rotate(-360deg);
}

.edit-icon {
  position: absolute;
  margin: 17px 0px 0px 250px;

  color: white;

  transform: scale(1.2);

  transition: transform 400ms cubic-bezier(0.65,1.33,0.7,1.43)
}

<script src="https://kit.fontawesome.com/d0c76ce6ff.js" crossorigin="anonymous"></script>
<div class="section vm-id">
  <div class="vm-id-textbox">
    <div class="textbox" contenteditable placeholder="Enter an ID..." oninput="togglePlaceholder();"></div>
    <i class="fas fa-edit edit-icon"></i> 
  </div>
</div>

希望您能帮助我了解我在做什么错！