移动元素时如何阻止图像抖动？答案

【问题标题】：How to stop img from shaking when moving element?移动元素时如何阻止图像抖动？
【发布时间】：2019-07-24 22:51:24
【问题描述】：

单击按钮时，我有 flex-box 动画，但是当它发生时，img 会稍微晃动（来回 1-2px 之类的），它非常轻微但很明显，如果你很难看到这个让我知道我会尝试制作视频。

代码笔：https://codepen.io/MariusZMM/pen/PLzodX

    html,
    body {
      width: 100%;
      height: 100%;
      background: #544;
    }
    
    .container {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      height: 100%;
    }
    
    .item {
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .item .cA,
    .item .lI {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      text-align: center;
    }
    
    .f1 {
      -webkit-box-flex: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
    }
    
    .f2 {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
    }
    
    .f2 .btn {
      position: absolute;
      width: 50%;
      height: 70px;
      top: 80%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      background: #444;
    }
    
    .img {
      background-image: url("https://davidcrew.files.wordpress.com/2010/01/wallpaper-177057.jpg");
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100%;
    }
    
    .f3 {
      -webkit-box-flex: 1.5;
          -ms-flex-positive: 1.5;
              flex-grow: 1.5;
    }

	<div class="container">

		<div class="item f1" style="background: red"></div>

		<div class="item f2 img">
			<button class="btn">
				<div class="sI">Sign In</div>
			</button>
		</div>

		<div class="item f3" style="background: blue"></div>

	</div>

【问题讨论】：

我认为问题出在背景位置：已修复；此属性在 Google chrome 中存在性能问题。
你可能是对的，但我在 Safari 上尝试过同样的问题。 Firefox 没有这个问题。
Chrome 我指的是 Web-kit 浏览器。这可能会有所帮助：fourkitchens.com/blog/article/… Removing background-position: fixed;将解决滚动问题
是的，我正在阅读类似的内容medium.com/vehikl-news/… 将尝试回复结果

标签： html css flexbox css-transforms

【解决方案1】：

正如 Sree 所建议的那样，现在一切都很好https://codepen.io/MariusZMM/pen/eXzNKX

但我只是好奇我是否使用引导程序，它会在左右两侧进行填充，我似乎无法摆脱。但是当我禁用 Bootstrap 时，一切都很好。这不是问题，但好奇是什么导致了这个 ins Bootstrap？

带 Bootstrap 的完整版：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Me</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/main.css" />
    <script rel="preload" src="./js/anime.js"></script>
</head>

<body>

    <div class="container">

        <div class="item f1" style="background: red"></div>

        <div class="item f2">
            <div class="img"></div>
            <button class="btn">
                <div class="sI">Sign In</div>
            </button>
        </div>

        <div class="item f3" style="background: blue"></div>

    </div>

    <script src="./js/main.js"></script>
</body>

</html>

CSS：

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #d63d3d;
}

.container {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 90%;
  width: 90%;
  z-index: 10;
}

.item {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.item .cA,
.item .lI {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}

.img::before {
  background-image: url("https://davidcrew.files.wordpress.com/2010/01/wallpaper-177057.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: fixed;
  content: '';
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -9999;
  will-change: transform;
}

.f1 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.f2 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.f3 {
  -webkit-box-flex: 1.5;
      -ms-flex-positive: 1.5;
          flex-grow: 1.5;
}

.btn {
  position: absolute;
  width: 50%;
  height: 70px;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #444;
}

JS：

var start = anime.timeline({
  easing: 'easeInOutSine',
  autoplay: false,
  duration: 450
});

start
  .add({
    targets: '.f3',
    flexGrow: '0'
  })
  .add({
    targets: '.f1',
    flexGrow: '1.5'
  });

document.querySelector('.btn').onclick = function() {
  start.play();
  if (start.began) {
    start.reverse();
  }
};

更新：添加填充：0；解决了。我只需要在正确的位置添加它，在这种情况下是 .container

【讨论】：