使用响应式 CSS Sprites 的奇怪像素位移答案

【问题标题】：Strange pixel displacement using responsive CSS Sprites使用响应式 CSS Sprites 的奇怪像素位移
【发布时间】：2017-03-08 11:29:56
【问题描述】：

我正在开发一个使用 Spritesheet 的旋钮组件。相对于屏幕尺寸，我需要它具有响应性。

使用 CSS Sprites，我能够以最大 Sprite 大小获得所需的行为。当元素按比例缩小时，问题就出现了。然后我在背景位置上得到一个随机的 UP 或 DOWN 单像素偏移，给人一种隆隆的印象。

这里有一个示例片段，可以实时查看此行为：

<html>
<head>
    <style type="text/css">
    .container{
        float:left;
        height: 10%;
        width: 20%;
    }
    .sprite{
        background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;

        max-width: 100%; 
        background-size: 100%;
        background-position: 0 0; background-size: 100%;
        animation: play 10s steps(127) infinite;
    }
    @keyframes play {
    100% { background-position: 0 100%; background-size:100%; }
}
    
    </style>
</head>
<body>
    <div class="container">
        <img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
    </div>

</body>
</html>

请注意，我的响应行为基于此站点：http://responsive-css.spritegen.com/

另外，这里有一个JSFiddle

我还尝试了其他方法，例如以绝对像素单位工作，然后使用以下函数调整大小：

zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;

当缩放因子不是精确除数时，也会出现同样的问题：例如：

0.5、0.75、0.2 工作

0.3、0.7、0.8 偏移问题

【问题讨论】：

标签： html css background-image css-sprites background-position

【解决方案1】：

根据您的问题，我了解到您希望对此做出响应，这是我的回答：

尝试将其放入以下代码的 iframe 中。

  * {
      padding: 0px;
      border: 0px;
      margin: 0px;
  }
  html {
      width: 100vw;
      height: 100vh;
  }
  body {
      width: 100vw;
      background-color: rgb(19, 19, 19);
  }
  div#mainContainer {
      margin: calc(50vh - 50vw) 0px;
      width: 100vw;
      height: 100vw;
      background-color: rgb(180, 180, 180);
      z-index: 1;
  }
  iframe {
      width: 100%;
      height: 100%;
  }
  @media only screen and (orientation: landscape) {
      div#mainContainer {
          margin: 0px calc(50vw - 50vh);
          width: 100vh;
          height: 100vh;
      }
  }

<body>
<div id="mainContainer">
    <iframe src="./iframe.html">
    </iframe>
</div>
</body>

这是 iframe.html

* {
  overflow: hidden;
}
.container{
    float:left;
    height: 100%;
    width: 100%;
}
.sprite{
    background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;
    width: 100%;
    height: 100%; 
    background-size: 100%;
    background-position: 0 0; background-size: 100%;
    animation: play 10s steps(127) infinite;
}
@keyframes play {
  100% { background-position: 0 100%; background-size:100%; }
}

<html>
<head></head>
<body>
<div class="container">
    <img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
</div>
</body>
</html>

【讨论】：