Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?

Question

I have stumbled on a fix for my issue by accident - and I don\'t like applying fixes I don\'t understand.

Answer 1

I think I may actually have worked out the reason for this.

The transition library being used seemed to have a bug in it, meaning that translate() was being used for the transition, not translate3d() despite it being available.

After changing this, the extra css rule:

-webkit-backface-visibility: hidden;

no longer had any effect - the transitions moved the dom node to the correct position without it.

I infer from this that the css rule somehow forced a translate3d() method to be used on the object.

However, to stop the somewhat jagged movement between frames, I still needed to add:

ul {
  -webkit-transform: translate3d(0,0,0);
}

I only found this by trial and error: peppering my css with the 'fixes' suggested:

-webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
visibility:visible;

and ensuring that 'translate3d' was used, I then gradually removed css 'fixes' until it was just '-webkit-transform: translate3d(0,0,0);' was necessary in one place.

So a combination of making the correct call for the animation, and applying a css style in one place made for a much better transition all together :)