Safari jittering/jumping (bug?) on first "focus" event of page load

Question

I'm currently fighting a very frustrating bug on Safari, and I'm not sure where else to turn.

It seems most elements (but not all, and I can't discern the differentiating factor) that will trigger a focus event will cause all elements on the page that are transitioned or animated to jump ~2px to the top and left. And this only occurs on the first focus event after the page loads.

It's a little annoying to see the bug, as it's in the logged-in portion of droplr.com, and I have been completely unable to distill down a simpler case on JSFiddle.

If you have/create an account and log-in, click on this edit icon for a drop:

You'll see that on the first focus of the page, things jitter. Here's the timeline when there's a single drop on the page and I trigger focus on an offending element:

With more drops, it's just more of the same, but it seems to max out around 40 paints. And the profiler doesn't suggest anything nefarious. Just a trip through jQuery internals.

If instead of laying elements out via a translate3d or matix3d, I simply use top and left, this bug goes away. After hours and hours of debugging this, I'm at a complete loss.

Hoping someone has seen something similar, could take a look, or could give me advice on debugging next steps.

Thanks so much!

Update: Dave Desandro suggested it was the 3d acceleration kicking in, so I tried it out with a translate instead, and sure enough, that did not cause the jitter. I have no idea why the hardware acceleration would be firing up with a focus event though, and only once.

I've tried setting a transformZ of 0 on page load to go ahead and ramp-up the hardware, but no luck there, either. Any more ideas are welcomed.

Answer 1

I've had this issue a while back and honestly I don't remember what exactly was the cause but here are some of the steps I followed:

Check that you don't have hide() and show() for the same element in the next line or vice versa. Example: el.show() el.hide()

Change Custom fonts to "Arial"

For the elements you don't want focus events add this code at the bottom of your scripts: noFocusElem.off('focus'); This will make sure to remove any focus handlers you might have added by mistake

Finally place your css before any scripts. It's a know fact that adding css rules after an inline style has been applied may cause jitter especially if you're using line-hieght property

Hope this helps :)