Visual bug in Safari using jQuery Mobile - Content duplication

Jquery MobileSafariEaseljsCreatejs

Jquery Mobile Problem Overview


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:

Good and Bad screenshot examples

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.

Jquery Mobile Solutions


Solution 1 - Jquery Mobile

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdrien A.View Question on Stackoverflow
Solution 1 - Jquery MobileolsnView Answer on Stackoverflow