javascript - 元素在另一个元素发生变化时发生变化

Question

我遇到了一个奇怪的行为，这可能是 Chrome 中的错误。

问题是当我为画廊变换属性设置动画时，下面的图像失去了它的边界半径？!这是我的测试服务器上的完整网站: http://chelefoto.com.192-198-106-143.vanilla.websavers.ca/

<div class="headshot">
  <img src="img/moi.jpg">
</div>

这是我如何为画廊设置动画的示例:

$('.arrow-container.right').click(function(){
                    var i = $('.arrow-container.right').index($(this));
                    divScroll[i].pos -= scrollSpeed;

                    // prevent scrolling past width of gallery //
                    if (divScroll[i].pos <= -(divScroll[i].width - galleryWidth) ){
                        divScroll[i].pos = -(divScroll[i].width - galleryWidth);
                    }
                    var container = $(this).siblings('.gallery-scroll').children('.gallery-container');
                    container[0].style.transform = "translate3d("+ divScroll[i].pos +"px,0, 0)";
                });

<div id="wedding-gallery" class="gallery">
  <div class="arrow-container left">
    <i class="fa fa-angle-left fa-5x"></i>
  </div>
  <div class="arrow-container right">
    <i class="fa fa-angle-right fa-5x"></i>
  </div>
  <div class="gallery-scroll">
    <div class="gallery-container" style="width: 2000px;">
      <img class="tile" src="img/galleries/wedding-1.jpg">
      <img class="tile" src="img/galleries/wedding-2.jpg">
      <img class="tile" src="img/galleries/wedding-3.jpg">
      <img class="tile" src="img/galleries/wedding-4.jpg">
      <img class="tile" src="img/galleries/wedding-5.jpg">
    </div>
  </div>
</div>

即使我在 Chrome 的开发工具中更改转换值，也会发生这种情况。

这不会发生在 IE 或 FireFox 中。我认为这是一个 Chrome 错误，但我想我会在这里与社区核实，看看是否有人可以在我的代码中看到这种行为的原因。

Answer 1

确保您使用的是更新版本的谷歌浏览器。如果您使用的是 4.0 版的 Google Chrome，那么这里是使用 border-radius 的正确语法。

-webkit-border-radius:5px

如果您使用的是更新版本，那么这应该不是问题。只需简单地使用

border-radius:5px