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

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

-webkit-border-radius:5px

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

即可

border-radius:5px

元素在另一个变换时发生变化

1 个答案: