Javascript 动画SVG防止D3仅在iOS中转换单独div的“top”样式

我的代码在Mac（Mavericks）Chrome、Safari和Firefox上正常工作，但如果在iOS7 Chrome和Safari上失败

在桌面版本中，带有图像模式背景的SVG填充窗口并无限向下滚动，而D3将div添加到DOM中，并将其

顶部

位置在

设置间隔

上转换到窗口底部

在移动设备上，蓝色潜水器下落的动画无法出现

如果SVG的

显示

设置为

无

，或其

可见性

设置为

隐藏

，则在iOS上下降div将正确转换。

如果SVG

rect

animateTransform

repeatCount

设置为一个数字（而不是

unfinite

），则在iOS中下降的divs将正确转换。

如果我从D3选择样式行中删除

转换

，则下降的div将显示在iOS窗口的底部，而不是粘在顶部。

如果我将我的移动设备连接到Mac并运行Safari开发工具，我会看到当显示

svg

时，我的

div.single

元素上的

top

属性的设置完全失败

app.parallaxField.style.display='none'时，
top
被添加到每个
div.single
：

每个
div.single上都设置了top
“>

app.parallaxField.style.display='inline'时，不会将
top
添加到每个
div.single
：

top
未设置在任何
div.single
“>

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

关于为什么一个svg的动画会影响D3在不同div上的
top
属性的转换，有什么想法吗？谢谢

JS:

HTML:

好吧，我解决了这个问题，从D3切换到jQuery，然后从设置前景div的
top
值的动画切换到设置它们的
margin top
值的动画

因此，与此相反（不适用于后面的两个动画模式SVG）：

此代码将执行以下操作：

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);

<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>

#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;
}

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);