Databases
StackOverflow2013
Postsdbo
POcss transform won't run without setTimeout
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss transform won't run without setTimeout
    primarykey
    data
    text
    <p>I'm creating an HTML5 app for iPhone to run in a UIWebview using Sencha Touch 2. </p> <p>I've created several methods to help myself to css animations. One of them does translate in the Y axis for me. I've set on things like <strong>-webkit-backface-visibility</strong> in my CSS to help smooth over animations. I've tried <strong>webkit perspective</strong> and <strong>webkit preserve-3d</strong>, but they seem to not help.</p> <p>Anyways, I've gotten the animations to a point where they are very smooth. The problem is, if I'm translating a large group of elements simultaneously, one of them won't translate. </p> <p>Let's say I'm translating A, B, C, D, E, and F upwards. F will just skip right to the end -- no translation. It's almost as if the <strong>-webkit-transform</strong> gets set before the <strong>-webkit-transition-duration</strong>, which is not what's happening in my code. Furthermore, A, B, C, D, and E animation perfectly.</p> <p>I'm not even sure if this is exclusive to when I'm animating a large group of elements, but that seems to be how it is happening now. If it happens to F, it will always happen to F -- so it is at least consistent in that sense.</p> <p>I even tried to fix it by dynamically creating a element with a new class style equal to the transform and duration, embedding that in the DOM, and then setting the element's class equal to the class of the style. I got the same problem.</p> <p>The thing is, if I embed the final line of <strong>Animations.translateY</strong> in a setTimeout function, even for 1 millisecond delay, the everything will always animate. This, however, leads to the screen flickering nastily ~33% of the time, which I'm guessing is due to too many setTimeouts?</p> <p>As for browser consistency, I see the lack of animation (without setTimeout) in both chrome on my PC and the UIWebview on the iPhone device. I only see flicker (with setTimeout) on the iPhone device.</p> <pre><code>Animations.translateY = function(element, measurement, duration, callback, easing) { Animations.setAnimationCallback(element,callback) var css = "translate3d(0,"+measurement+",0)"; duration = parseFloat(duration); element.style['-webkit-transition-duration'] = duration + 's'; element.style['-webkit-transform'] = css } </code></pre> <p>the animation callback code.. I feel this is irrelevant, because the callback never actually fires (animations that take 0s don't fire a callback)</p> <pre><code>Animations.setAnimationCallback = function(element, callback) { //set callback handler element.addEventListener('webkitTransitionEnd', function(){ //set animation duration back to 0 this.style['-webkit-transition-duration'] = "0s"; if(callback != null) { callback(); } this.removeEventListener('webkitTransitionEnd', arguments.callee, null); }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmarklar
    1. USmarklar
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POcss transform won't run without setTimeout
      1. USmarklar
      1. VTBountyStart
    2. VO
      singulars
      1. POcss transform won't run without setTimeout
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POcss transform won't run without setTimeout
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONot really a solution, but you could try [double buffering](http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering) and see if it removes the flickering.
      singulars
      1. POcss transform won't run without setTimeout
      1. USCavyn VonDeylen
    2. COThat's a cool thought, but I'm not using the Canvas, I'm just animation in the DOM. If I tried to replicate what that thread is doing but for the DOM, I'm worried that would bloat the DOM and lead to choppy animations
      singulars
      1. POcss transform won't run without setTimeout
      1. USmarklar
    3. COIs it always "F" regardless of order (among A,B...), or always the 6th one, or always the last one that has an issue?
      singulars
      1. POcss transform won't run without setTimeout
      1. USErik Eidt
 

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