javascript - 动画 SVG 阻止 D3 仅在 iOS 中转换单独 div 的 `top` 样式

Question

我的代码在 Mac (Mavericks) Chrome、Safari 和 Firefox 上运行正常，但如果在 iOS7 Chrome 和 Safari 上运行失败。

在桌面版本上，带有图像图案背景的 SVG 填充窗口并无限向下滚动，而 D3 将 div 添加到 DOM 并转换它们的 top。在 setInterval 上定位到窗口底部.

蓝色div 下落的动画在移动设备上无法出现。

如果 SVG 的 display设置为 none或其 visibility设置为 hidden ，下降的 div 在 iOS 上正确过渡。

如果 SVG rect animateTransform repeatCount设置为一个数字(而不是 indefinite )，下降的 div 在 iOS 中正确过渡。

如果我删除 transition从 D3 选择样式行开始，下降的 div 出现在 iOS 窗口的底部，而不是粘在顶部。

如果我将我的移动设备连接到我的 Mac 并运行 Safari Dev Tools，我会看到 top 的设置我的属性(property)div.single当 svg 时元素完全无法出现被展示。

top添加到每个 div.single什么时候app.parallaxField.style.display = 'none' :

top不添加到每个 div.single什么时候app.parallaxField.style.display = 'inline' :

玩z-index和备用 display或 position选项似乎没有帮助。

关于为什么一个 svg 的动画会影响 D3 的 top 过渡的任何想法单独的 div 上的属性？谢谢!

JS:

var app = {};

var drop = function() {

  var numCols = Math.floor(app.windowW / app.singleW) + 1;
  var col = Math.floor(Math.random() * numCols);
  var positionX = (col * app.singleW - app.singleW / 8) - app.singleW / 2;
  var endPositionY = app.windowH - app.singleH;

  var single = d3.select('#singles').append('div');
  single.attr('class', 'single').style({ left: positionX + 'px' });

  // Removing `transition` from the D3 styling makes the blue box appears at bottom of the window in iOS, rather than sticking to the top:
  single.transition().style({ top: endPositionY + 'px' });
  // single.style({ top: endPositionY + 'px' });

};

document.addEventListener('DOMContentLoaded', function() {

  app.parallaxField = document.getElementById('parallax-field');

  // Toggling either `display` or `visibility of SVG fixes the falling blue div in iOS:
  // app.parallaxField.style.display = 'none';
  // app.parallaxField.style.visibility = 'hidden';

  app.windowW = window.innerWidth;
  app.windowH = window.innerHeight;
  app.singleW = 128;
  app.singleH = 156;

  window.setInterval(drop, 1000);

});

HTML:

<div id="container">

  <svg id="parallax-field" width="100%" height="100%">

    <defs>
      <pattern id="pattern1" patternUnits="userSpaceOnUse" height="200" width="200">
        <image x="-40" y="-40" height="200" width="200" xlink:href="path/to/image"></image>
      </pattern>
    </defs>

    <rect id="parallax1" width="100%" height="125%" fill="url(#pattern1)">
      <animateTransform
        attributeName="transform"
        type="translate"
        from="0 -100"
        to="0 100"
        dur="3750ms"
        repeatCount="indefinite"
      />
      <!-- Changing above `repeatCount` to a number fixes the dropping blue divs after a short delay. -->
    </rect>

  </svg>

  <div id="singles"></div>

</div>

CSS:

#container {
  background-color: black;
  bottom: 0; 
  left: 0;
  position: absolute;
  right: 0; 
  top: 0; 
}
.single {
  background-color: blue;
  height: 156px;
  position: absolute;
  top: 0;
  width: 128px;
}

Answer 1

好吧，我通过从 D3 切换到 jQuery 解决了这个问题，并从动画化前景 div 的 top 值切换到动画化它们的 margin-top 值。

所以而不是这个(不适用于它背后的两个动画图案 SVG):

var single = d3
  .select('#singles')
  .append('div')
  .attr('class', 'single')
  .style({ left: positionX + 'px' })
  .transition()
  .duration(app.msPerBeat / 2)
  .style({ top: endPositionY + 'px' });

这段代码代替了这个工作:

var single = document.createElement('div');
single.setAttribute('class', 'single');
single.style.left = positionX + 'px';
app.singles.appendChild(single);
$('.single').last().animate({ marginTop: endPositionY + 'px' }, app.msPerBeat / 2);