转换：translateX打破Chrome中输入的文本选择

Question

TranslateX会破坏Chrome中输入内容的文字选择。

div {
  background: #afe5a4;
  padding: 20px;
  width: 300px;
  transform:translateX(150px);
}

input {
  width: 100%;  
}

演示：

https://jsfiddle.net/k42g91h1/1/

尝试在输入中选择文本并将光标移动到绿色框的左侧。 您将看到选择了多么奇怪的文本。

如何解决这个问题？

Answer 1

这是一个奇怪的错误。我不知道你使用translateX的方式和原因，但你基本上可以通过给输入一个相同值的负translateX来欺骗浏览器以认为输入实际上是它的位置你的div有相应的设定保证金。

input {
  width: 100%; 
  transform:translateX(-150px);
  margin-left: 150px;
}

小提琴：https://jsfiddle.net/72zx4tw0/

Answer 2

存在的铬臭虫：

https://bugs.chromium.org/p/chromium/issues/detail?id=928659&q=transform%20translate%20input&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

您可以使用

的变通办法

div {
  position: absolute;
  left: 150px;
}

提琴：https://jsfiddle.net/pm9L1g4u/