Visual bug in Safari using jQuery Mobile - Content duplication

Question

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.

Therapeutics

This sounds like a possible racing-condition, have you tried 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 or so? – Cutlass

@olsn : Thanks a lot, it works ! Now I've got a little flash in Safari but I prefer that. – Therapeutics

If you don't want that flash, it might work if you make the body invisible right away on safari without a timeout and then display it shortly after - but still: Keep in mind that this is a very ugly workaround! ;) – Cutlass

try to trigger div $("#mydiv").trigger("create") – Proline

At this moment, the current version of Safari is 12.x, and Safari for Windows is EOL... – Nut

@AdrienA. Would you mind to share some simplified version of the code you are trying to run? – Julee

I love the clarity of the bad-good dichotomy. Good use of a graphic! Kudos to @olsn for a fix with just a comment. Guy should get points! – Ransome

@olsn, You could turn your comments into an answer. Even though it's a workaround, I'd upvote that answer, as it seems to have solved the problem for people. – Southerland

Answer 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.

Cutlass