时间戳

首页 > 解决方案 > Webkit 浏览器转换：翻译不正确的行为

html - Webkit 浏览器转换：翻译不正确的行为

问题描述

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

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

我正在尝试使用 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");

})

标签： htmlcss

解决方案

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

<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 的浏览器中的自动对焦属性。

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

因此，解决方案是删除自动对焦属性或从该主题中获取答案-为什么要使用自动对焦启动过渡？

推荐阅读