Animated SVG prevents D3 from transitioning `top` style of separate divs in iOS.

[Anonymous]

I’ve cut my code to a minimum at:

http://jsbin.com/hapip/1

It works properly on Mavericks Mac Chrome, Safari, and Firefox, but if fails on iOS7 Chrome and Safari.

On the desktop versions, an SVG with a image-pattern background fills the window and scrolls downward indefinitely, while D3 adds divs to the DOM and transitions their top positions to the window’s bottom on a setInterval.

The animation of the falling blue div fails to occur on mobile.

If the SVG’s display is set to none or its visibility is set to hidden, the falling divs transition correctly on iOS.

If the SVG rect animateTransform repeatCount is set to a number (rather than indefinite), the falling divs transition correctly in iOS.

If the I remove transition from the D3 selection-styling line, the falling div appears at the bottom of the window in iOS rather than sticking to the top.

If I connect my mobile device to my Mac and run Safari Dev Tools, I see that the setting of the top property on my div.single elements altogether fails to occur when the svg is displayed.

top is added to each div.single when shots.parallaxField.style.display = 'none':

top is not added to each div.single when shots.parallaxField.style.display = 'inline':

Playing with z-index and alternate display or position options doesn’t seem to help.

Any ideas on why one SVG’s animation would affect D3’s transition of the top property on separate divs? Thanks!

JS:

var shots = {};

var drop = function() {

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

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

  // Removing <code>transition</code> 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() {

  shots.parallaxField = document.getElementById('parallaxField');

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

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

window.setInterval(drop, 1000);

});

HTML:

<div>

  <svg id="parallaxField" 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="http://shotseverybody.com/images/shot_tile.png"></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></div>

</div>

CSS:

#container {
  background-color: black;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.single {
  background-color: blue;
  width: 128px;
  height: 156px;
  position: absolute;
  top: 0;
}

[Author]

Posts