59

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.

hem
  • 1,012
  • 6
  • 11
Adrien A.
  • 691
  • 4
  • 3
  • 13
    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? – olsn Apr 12 '13 at 12:08
  • @olsn : Thanks a lot, it works ! Now I've got a little flash in Safari but I prefer that. – Adrien A. Apr 12 '13 at 13:22
  • 2
    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! ;) – olsn Apr 12 '13 at 14:57
  • try to trigger div $("#mydiv").trigger("create") – amit kate Jan 20 '15 at 09:07
  • At this moment, the current version of Safari is 12.x, and Safari for Windows is EOL... – benc Feb 06 '19 at 22:23
  • @AdrienA. Would you mind to share some simplified version of the code you are trying to run? – acarlstein Mar 06 '19 at 19:08
  • 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! – kd4ttc Sep 01 '19 at 00:42
  • @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. – Tyler Mumford Jan 23 '20 at 17:20

1 Answers1

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.

olsn
  • 16,644
  • 6
  • 59
  • 65