Visual bug in Safari using jQuery Mobile - Content duplication

I'm building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.

So, when I load the page, some content gets visually duplicated. The DIVs are not really duplicated, it is just visual.

• This bug only appears on Safari (Windows + OSX).
• If I click and slide to select the page, the bug disappears.
• If I switch page (with jQuery Mobile slide transition), it also disappears.

Here is a screenshot:

My code is massive so I cannot really post it fully here. I've just spent 2 hours playing around with my code to try to fix this. I really have no clue.

If you have an idea and need more information, then please let me know.

Solution 1:

Not a pretty answer, but a workaround that worked for quite a few:

This sounds like a possible racing-condition, you can try setting a timeout(couple MS) when the page is loaded and then have it re-renderd after that timeout through switching display: none/block on the body.