Databases
StackOverflow2013
Postsdbo
POReplacing JQuery animate with CSS3 transitions on an iPad, why do elements vanish on transition?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReplacing JQuery animate with CSS3 transitions on an iPad, why do elements vanish on transition?
    primarykey
    data
    text
    <p>my apologies in advance, this is my first SO question.</p> <p>I have a simple slider that consists of several list items (li's), that each contain a Google Chart. Each Google Chart is essentially an iFrame with SVG elements inside that make up the chart. Each chart has a specific set size. The use of CSS3 transitions is because jQuery is slow as molasses on the iPad, especially the iPad 1:</p> <pre><code>&lt;ul class = "slider"&gt; &lt;li&gt;{Google Chart 1}&lt;/li&gt; &lt;li&gt;{Google Chart 2}&lt;/li&gt; &lt;li&gt;{..and so on}&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>I have the following code for the iPad, bound to a link button for advancing the slider</p> <pre><code>var toMove = container.find('ul.slider'); //For purposes of this example I'm setting this to 300. In reality this is calculated by the index of the slider and the width of each chart var pixelsToMoveBy = 300; toMove.css('-webkit-transition', '-webkit-transform 0.5s linear, margin-left 0.5s linear'); toMove.css('-webkit-transform', 'translate3d(' + pixelsToMoveBy + 'px, 0px, 0px)'); </code></pre> <p>This works fine in desktop Chrome and Safari (Both Mac and PC), but on the iPad, only the first chart will display and the following charts will be invisible, and I have no idea why. Reverting back to the jQuery way:</p> <pre><code> toMove.animate({ marginLeft: pixelsToMoveBy + "px" }, 500); </code></pre> <p>..will work fine. If I do the following</p> <pre><code>toMove.find('iframe').contents().find('body').css('background-color', 'red'); </code></pre> <p>or even</p> <pre><code>toMove.find('iframe').contents().find('#chartarea').css('background-color', 'green'); </code></pre> <p>Then I can visibly see that the iFrame and chart do exist, but the SVG elements don't seem to render. </p> <p>Can anyone explain to me why I'm not seeing other charts?</p> <p><strong>UPDATE 3</strong></p> <p>I've made a simple html file that illustrates the problem. It uses iScroll, which effectively uses webkit transforms: </p> <p><a href="http://reactiondynamics.com/lab/ipad.html" rel="nofollow">http://reactiondynamics.com/lab/ipad.html</a></p> <p>Only the first iFrame will display on the iPad. The second one is truncated, and the rest do not appear. It works fine however, in all other browsers on desktop.</p> <p><strong>UPDATE 2:</strong> Basically I'm trying to get the same thing as the Apple scroller but how it operates on the iPad, that is, smoothly. </p> <p><strong>UPDATE:</strong></p> <p>On scouring the Safari document, I found the quote below <a href="http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html" rel="nofollow">here</a> </p> <p><em>Note: Elements that have overflow set to hidden are unable to render their child elements in 3D, and are rendered as though the transform style were set to flat.</em> </p> <p>Looks like it cannot be done then, because in "flat" mode, the graphs don't appear. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMo Kargas
    1. USMo Kargas
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POReplacing JQuery animate with CSS3 transitions on an iPad, why do elements vanish on transition?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload