Menu
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.
519
Open the “Develop” menu and you should see an entry near the top showing the name of your device (for example, “Jeff’s iPhone”). Hover on this item so the menu slides open. The new menu will display all the tabs open in Mobile Safari and that the Web Inspector can be connected to. Click the item relating to the example app.
Before we can get started with using the Web Inspector to debug our app we must first enable both the iOS and OSX browsers for development. On your iOS device navigate to the Settings app and scroll down and select the Safari entry. Inside the Safari settings screen scroll to the very bottom and select the “Advanced” option.
Open Safari’s Preferences dialog by clicking the “Safari” menu item and selecting “Preferences”. Inside the Preferences dialog, go to the Advanced tab and then check the “Show Develop menu in menu bar” option at the bottom.
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.
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
