Webkit 浏览器转换：翻译不正确的行为答案

【问题标题】：Webkit browsers transform: translate incorrect behaviourWebkit 浏览器转换：翻译不正确的行为
【发布时间】：2019-07-02 14:44:46
【问题描述】：

我正在尝试制作一个滑动搜索框。

当你按下按钮时，搜索框应该从按钮中滑出。

我正在尝试使用 translateX(100%) 属性。

但在基于 WebKit 的浏览器上，初始 translateX(100%) 不起作用。

当我将 translateX 从 100% 切换到 0 时，它会滑向错误的方向。 Firefox + Edge - 一切正常。

仅限 Webkit 问题。

我确定我错过了什么，或者这是一个众所周知的错误？

如何解决此问题？

谢谢！

Jsfiddle 链接 - https://jsfiddle.net/timonbandit/dm9u0w7t/44/

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<form action="/search" class="m-search-box__form">
<div class="m-search-box__input-wrp">
<input autofocus="autofocus" class="m-search-box__input" type="search">
</div>
<button class="m-search-box__submit" type="submit">I</button>
</form>

.m-search-box__form {
  float: right;
  display: flex;
  width: 35px;
  position: relative;
}

.m-search-box__input-wrp {
  position: absolute;
   top: 0;
   right: 35px;
   overflow: hidden;
}

.m-search-box__input {
  display: inline-block;
  height: 35px;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out;  
}
.m-search-box__input.opened {
  transform: translateX(0)
}

.m-search-box__submit {
  width: 35px;
  height: 35px;
}

$(".m-search-box__submit").click(function(e){
    e.preventDefault();
  $(".m-search-box__submit").toggleClass("opened");
  $(".m-search-box__input").toggleClass("opened");

})

【问题讨论】：

标签： html css

【解决方案1】：

我找到了问题和解决方案。

<form action="/search" class="m-search-box__form">

<div class="m-search-box__input-wrp">

  <input class="m-search-box__input" type="search">

</div>

<button class="m-search-box__submit" type="submit">

  I

</button>

https://jsfiddle.net/timonbandit/dm9u0w7t/46/

并找到了一个相关的话题。

问题在于基于 WebKit 的浏览器的自动对焦属性。

如果一个元素包含自动对焦属性 - WebKit 无论如何都会显示它:-)

所以解决方案是删除自动对焦属性或从这个主题中获取答案 - Why is transition started up with autofocus?

【讨论】：