徽标在对其兄弟姐妹进行动画处理后变得像素化答案

【问题标题】：The logo become pixelated after animating its siblings徽标在对其兄弟姐妹进行动画处理后变得像素化
【发布时间】：2015-05-28 19:54:11
【问题描述】：

我正在做一个项目，它的细标题是动画的，动画是：当用户展开侧面板时，它占据屏幕的一半，标题缩小到后半部分。

现在的问题是，当我将标题设置为屏幕的一半时，徽标会变得像素化，我不知道为什么！

仅在 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%);
      }
    }
  }
}

$(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});
    }
});

谢谢。

【问题讨论】：

标签： javascript jquery css animation webkit

【解决方案1】：

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

【讨论】：