logo标签列表

background-attachment: fixed与translateX(0)冲突导致背景无法固定的问题

cssbackground-attachment
5
我有一个带有固定背景的滚动元素：
.my-element {
   background: url(/foo.png) no-repeat right bottom;
   background-attachment: fixed;
}

工作得很好！通常情况下。但是，如果我对它应用一个 translate 变换（即使是 0），它的背景会发生移动而无法固定位置（它会锚定到 .my-element 的底部，该元素已滚出视图：

.my-element {
   background: url(/foo.png) no-repeat right bottom;
   background-attachment: fixed;
   transform: translateX(0); // this breaks the "fixed" behavior
}

有一个类似的问题是关于这个的 这里，但是四年前的答案说这个bug已经被修复了，并且只发生在Firefox上。但是我在Firefox和Chrome中都遇到了这个问题。

有没有什么办法可以避免这种情况呢？还是有没有一种方法可以不使用background-attachment属性实现相同的效果呢？谢谢！

编辑：刚刚加入了一个jsfiddle演示了这个问题：https://jsfiddle.net/mozges0k/7/

你能提供一个真实世界的使用案例吗（在CodePen或其他地方）？我不能告诉你关于错误的情况，但我可以帮助你找到解决方法。 - Jakob
当然，给你：https://jsfiddle.net/mozges0k/7/ - Nathan
我想在这里使用background-attachment，但如果我不能用它，有任何替代方法吗？ - Nathan
1
这是一个已知的问题。您可以绝对定位背景。https://css-tricks.com/the-fixed-background-attachment-hack/ - mahan
5个回答
2
我曾经费了很大的力气寻找解决方法。将背景图像提取到自己的容器中并添加 position: sticky 似乎是一个可行的解决方案，但最终却行不通。
我想到了另一个解决方案：如果您将 transform 提取到自己的类中，并在动画完成后删除该类会怎样？当去除 transform 后，似乎 background-attachment 再次开始工作，即使在运行时也是如此。然后 background-attachment 就可以发挥其魔力，您的动画也可以运行。
<div class="my-element animate">Lorem ipsum</div>


.my-element {
    background: url(/foo.png) no-repeat right bottom;
    background-attachment: fixed;
}

.animate {
    transform: translateX(0);
}


function animationFinished() {
    const target = document.querySelector('.animate');
    target.classList.remove('animate')
}

虽然这不像我想要的那样简单明了，但这确实是一个解决方案。请告诉我您的想法，祝好运！

很高兴知道我不是唯一一个遇到这个问题的人。问题在于在转换过程中（我正在React中从一个路由滑动到另一个路由），背景是可见的，并且如果附件被移除（或由于转换而中断）会闪烁。 - Nathan
我最终从转换后的容器中提取了背景，并将其作为固定的0,0,0,0元素放置。这种方法有点奏效，但是在路由之间滑动时，背景保持静止，而不是与其他内容水平滑动，这一点我不喜欢（也使得在不同页面上具有不同背景更加困难，因此我被限制在网站上只能使用一个背景）。 - Nathan
1
好的，我明白你的意思。很遗憾这个不正常工作，它不应该是这样的。当然，向其他开发人员展示自己正在工作的东西是一种好的感觉 :) 太棒了！ - Jakob
谢谢！如果你有任何解决方法的想法，请告诉我。我想用JavaScript设置一个绝对的顶部偏移量，并在滚动事件中使用，但担心这会在滚动时导致背景闪烁。 - Nathan
我正在使用类似于Framer Motion的东西，它的工作方式类似于它。路由之间的幻灯片动画效果很好，问题在于它通过将translateX应用于主内容容器来实现，这会破坏内容中的背景固定附件（因为它会干扰坐标，据我所知）。 - Nathan
显示剩余2条评论
2

背景

我稍微研究了一下这个话题，发现这种行为并不是一个bug。它实际上符合规范。

起初，事情的表现就像你（和我们大多数人）认为的那样： background-attachment: fixed 应该将背景固定在视口相对位置。

结果发现，当涉及到transform时，实现固定行为太难了，因此规范作者决定“我们可以改变规范以使事情更容易。”

现在规范说：

根元素上的固定背景受该元素指定的任何变换的影响。对于所有其他受变换影响的元素（即已应用变换或其任何祖先元素已应用变换的元素），“fixed”作为“background-attachment”属性的值被视为具有“scroll”的值。

这段文字的意思是：“基本上说，使用transform会使background-attachment: fixed无效，这一切都解释了。”
解决方案是：我建议使用固定大小的滚动容器，它与视口大小相同，并具有overflow: scroll。它作为背景承载者，并且你可以对其应用变换。现在，因为它与视口大小相同，垂直滚动不会有任何不同的行为。但是你仍然可以使用transform: translateX(n)来对其进行任何想要的水平移动。 

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'

const scrollContainer = document.querySelector('.scroll-container')
const contentContainer = document.querySelector('.content-container')

const p = document.createElement('p')
p.innerText = text.repeat(20)

contentContainer.appendChild(p)

const btn = document.getElementById('btn')

btn.addEventListener('click', () => {
  scrollContainer.style = 'transform: translateX(-1000px);'
})
body {
  margin: 0;
  padding: 0;
}

.scroll-container {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid red; 
  height: 100vh;
  width: 100vw;
  
  overflow: scroll;
  
  background: url("https://i.imgur.com/PcqkZxh.jpg") no-repeat;
  background-attachment: fixed;
  transition: 1s;
  transform: translateX(0);
}
<div class="scroll-container">
  <div class="content-container">
    <button id="btn">
      move
    </button>
  </div>
</div>

0

如果您不介意添加2个容器（元素），那么可以尝试以下解决方法：

为您要转换（翻译）的元素创建一个父容器

--> 您可以将父元素定位为相对位置

--> 创建另一个容器来定位图像，将其设置为绝对位置

   .container-image {
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://i.imgur.com/PcqkZxh.jpg") no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

然后，您可以使用任何固定背景图像容器上的变换动画。

.foo {
  display: "none";
  flex-direction: "row";
}

.container-parent-broken {
  position: relative;
}

.container-broken {
  padding: 10px;
  border-radius: 10px;
  transform: translateX(0);
}

.container-image {
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://i.imgur.com/PcqkZxh.jpg") no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}
<h1 style="text-align: center">
  Scroll to see the difference
</h1>

<div style="display: flex; column-gap: 20px;">

  <div class="container-parent-broken">
    <div class="container-image"></div>

    <div class="container-broken">
      <h1>
        This doesn't (translateX(0))
      </h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div>
    </div>

  </div>

</div>

这正是我最终采用的解决方法，但它并不是最佳选择。这意味着我无法将背景与页面的其余部分一起转换--因此当更改路由时，我无法使背景滑出视图（我正在使用React）。我还无法在页面上放置任何其他固定元素，而我希望有这样的功能。感谢您抽出时间回答，但我仍然希望找到一个解决方案。 - Nathan
0

另一种解决方法是在容器内使用网格布局。

使用1列1行的网格，然后将图片（在本例中为带有背景图像的div）和内容（包装在另一个div中）分配到同一行和列。

然后可以在图像上使用position:sticky，在滚动时使其粘在一起，并在内容上使用z-index:0，使其在顶部可见。

不同之处在于背景图像只有在容器到达视口顶部时开始固定，并在完全滚过该元素时停止固定。

现在可以使用translateX来对所有内容进行动画处理。

.container-working, .container-broken {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.container-broken {
  transform: translateX(0);
}

.container-image, .container-content {
  grid-row: 1;
  grid-column: 1;
}

.container-image {
  position: sticky;
  
  top: -10px; /* because of border-radius it has to stick a bit higher */
  border-radius: 10px;
  height: calc(100vh + 20px); /* increase height by twice the border-radius */
    
  background: url("https://i.imgur.com/PcqkZxh.jpg") no-repeat;
  background-size: cover;
}

.container-content {
  z-index: 0;
  padding: 10px;
}
<h1 style="text-align: center">
Scroll to see the difference
</h1>

<div style="display: flex; gap: 20px; position:relative;">
  <div class="container-working">
    <div class=container-image></div>
    <div class=container-content>
      <h1>
        This works (fixed bg)
      </h1>
      <div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div>
    </div>
  </div>
  <div class="container-broken">
    <div class=container-image></div>
    <div class=container-content>
      <h1>
       This doesn't (translateX(0))
      </h1>
      <div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div>
    </div>
  </div>

</div>

-1
请检查代码，它对我来说很好用。我已经遇到过这个问题了。我在关键帧中添加了background-size: cover;和transform: translateX(0)，我认为这对你也有用。

.my-element {

.my-element {
  padding: 10px;
  border-radius: 10px;
  background: url("https://i.imgur.com/PcqkZxh.jpg") no-repeat;
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: mymove .1s alternate ;
  -webkit-animation: mymove .1s alternate ;
}
@-webkit-keyframes mymove {
  from {
    transform: translateX(0);
    -webkit-transform:translateX(0);
  }
} 

@keyframes mymove {
  from {
    transform: translateX(0);
    -webkit-transform:translateX(0);
  }
} 
<h1 style="text-align: center">
Scroll to see the difference
</h1>

<div class="my-element">
   <h1>
   This works (fixed bg)
   </h1>
  <div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  </div>

  </div>

很遗憾，不行。尝试在15秒的超时时间内添加一个 to { transform: translateX(-100)}，你会注意到与我提供的jsfiddle中相同的问题。固定的附件在过渡期间会中断。 - Nathan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接