在动画化了它的兄弟姐妹之后，这个标志变得像素化了

Question

我正在做一个项目，它的细标题是动画的，动画是:当用户展开侧边面板时，它占用了屏幕的一半，标题缩小到另一半。

现在的问题是，当我把头部动画为屏幕的一半时，徽标变得像素化了，我不知道为什么!

此问题仅在webkit浏览器[chrome/Safari]中存在。

这是一个展示问题的视频

https://www.dropbox.com/s/b9hopzqc4cpdfz6/logo-issue.mkv?dl=0

HTML

<div id="topBar" class="clearfix">
    <a class="logo pull-left" href="index.html"><img src="images/logo.png" alt=""/>Three.js Project</a>
    <ul class="topControls clearfix pull-right">
        <li class="pull-left"><i class="fa fa-camera-retro"></i>View
            <select name="" id="">
                <option value="">Normal</option>
                <option value="">Back</option>
                <option value="">Inside</option>
            </select>
        </li>
        <li class="pull-left"><a href="#"><i class="fa fa-gear"></i>Settings</a></li>
        <li class="pull-left"><a href="#"><i class="fa fa-floppy-o"></i>Save</a></li>
        <li class="pull-left"><a href="#"><i class="fa fa-calculator"></i>Calculator</a></li>
        <li class="pull-left"><a href="#"><i class="fa fa-lightbulb-o"></i>Help</a></li>
    </ul>
</div>

CSS

#topBar {
  position: fixed;
  height: 40px;
  left: 0;
  top: 0;
  right: 0;
  z-index: 950;
  background: $sceneSectionsBg;
  border-bottom: 1px solid $sceneSectionsBorderColor;
  .logo {
    margin: 10px 0 0 10px;
    display: block;
    height: 20px;
    img {
      margin-right: 7px;
      height: 20px;
    }
  }
  .topControls {
    list-style: none;
    padding: 0;
    position: absolute;
    top: 10px;
    right: 430px;
    li {
      margin-right: 22px;
      color: lighten($controlsActiveColor, 10%);
      &:last-child {
        margin-right: 15px;
      }
      .fa {
        margin-right: 5px;
      }
      select {
        color: $controlsActiveColor;
        font-size: 12px;
        height: 20px;
        position: relative;
        top: -1px;
        margin-left: 3px;
      }
      a {
        color: lighten($controlsActiveColor, 10%);
        text-decoration: none;
      }
      &:hover a {
        color: lighten($controlsActiveColor, 20%);
      }
    }
  }
}

JS

$(document).on('click', '#sceneCategoriesToggle', function () {
    var $sceneCategories = $('#sceneCategories'),
        sceneCategoriesWidth = $sceneCategories.outerWidth(),
        isExpanded = $sceneCategories.hasClass('expanded'),
        $relativePanel = $('#bottomPanel, #topBar .topControls');
    if (isExpanded) {
        $sceneCategories.animate({right: -sceneCategoriesWidth}, function () {
            $sceneCategories.removeClass('expanded');
        });
        $relativePanel.animate({right: 0});
        $('.detailsContent .closeBtn').click();
    } else {
        $sceneCategories.animate({right: 0}, function () {
            $sceneCategories.addClass('expanded');
        });
        $relativePanel.animate({right: sceneCategoriesWidth});
    }
});

谢谢。

Answer 1

我通过使用另一个小图像来解决这个问题，原来的图像是200px X 200px，而徽标是20px X 20px，所以我使用了一个小图像，这就解决了问题