I have a jQuery mobile app that is working perfectly in mobile, however I need to make it work on desktop as well. This is no big deal, however a strange anomaly is happening. Randomly, when the back button is pressed, the screen will turn the same color as the background of the body element, hiding any content. Has anyone else experienced this or does anyone have any thoughts as to why this is occurring?
Related
We have a PWA (web app) that the user can add to the homescreen to make it look more like an app. Some users have reported a strange issue that only seems to appear on IOS sometimes when the following step has been made.
Open the app from the homescreen
Use the app for a while
Put it into background
Turn off the screen for a while
Turn the screen back on and put the app to foreground again
The bug is that nothing seems to happen when you click on a select or date input control. First I thought that there was some overlay in the app that was blocking the ui controls but the elements receive focus on click, but not options are shown.
Now it really becomes strange. When I tried to click a little bit under the select input an option was selected. The same thing occured with a time select. If I first clicked on the timeselect input control and then a little bit under, it updated the time.
So, the controls seems to be there but nothing is visible on the screen. I have only been able to reproduce this on my own once but multiple users have been reporting the same thing. The only way to work around the bug is to restart the app.
It seems to be for all native safari controls that shows some kind of modal/popover.
I've did an indepth investigation on this select dropdown problem and posted an issue at bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=238318
It's a problem with dropdowns of several components (such as select, input file/date/month) where either the animation to have the dropdown appear or disappear seems to get stuck. You can sometimes see the dropdown being tiny and very transparent (if you zoom into a screenshot) and sometimes you'll be able to select an option even though you don't see the dropdown.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I am working on one of my company's product. It is a focus lost issue. We are using iframes, in this particular page when we touch/click outside input box/ textarea, then onscreen keyboard get disable. This issue comming on all ipads and both browsers Safari & Chrome. We are not able to figure out this issue. It will a gr8 help for us, if you had gone through smilar kind of issue, pls share your experience.
Since I have upgraded jQuery Mobile to 1.3 and PhoneGap to 2.5, I have a problem for page changing in my iOS application.
When I click to a link, for a few milliseconds, I see a "no page" state. It's not a white screen, but the background of my "body" element.
I have made some researches on the web, but it looks like no tricks work for me. Most of them tell to disable transition of jQM. But it is already the case for me.
I have tracked jQM event to see what happens, and apparently when I use the method changePage(), it hides the current page, and then show the final page. And during these two methods, I can see this "no page" state, with my body background.
So it is not the flickering navigation that occurs during transition (because I disabled transition), it's something else.
Anyone would have a suggestion to fix this annoying problem (I cannot post image with my reputation)?
This issue has some suggestions on changing the $.mobile.defaultTransitionHandler to use the simultaneousHandler instead of the default sequentialHandler.
https://github.com/jquery/jquery-mobile/issues/4024
This has improved page transition speed in my application (with $.mobile.defaultPageTransition set to 'none'), but I am still dealing with occasional white flashes.
I am building a cross-platform app using jQueryMobile and Phonegap. Currently using jQM 1.1.0 and Phonegap 1.6.1.
The page transition function sometimes just seems to break down when the user clicks a button or list item that links to another page in the app.
<a href="#page2">
This kind of link is what the whole app is made of. But depending on god knows what, sometimes when you click a link the app stalls. External links will still be followed, and buttons that don't trigger any page changing work fine. But anything with href and $.mobile.changePage seems to be broken.
This problem occurs in iPad Simulator and iPhone Simulator, not in Chrome. It seems to have something to do with the type of page transition specified (i.e. fade or slide or flip etc). Some transitions seem to cause problems, sometimes it seems to be the lack of a specified transition that is the cause, and sometimes neither of those explanations have any traction.
Before I add a whole bunch of code, I'm interested if anyone has similar experiences.