We have found a behaviour that in my opinion is a bug in Safari. Install the PWA on iOS to Home Screen, open app in standalone mode and tap to any text input, close the keyboard and double-tap on free space (it zooms out if zoomed, then double tap again), the white block appears from bottom of the page. Probably it is caused by the “keyboard” to offset the content when keyboard is active. I have tried with Angular and with React to create empty project and adding just an input and some coloring so the block is more visible. Both repositories are available on GitHub and deployed to Firebase. I have tried with a few production PWA of different companies, all apps had the same (buggy) behavior. I have reported to Apple already. Does anybody found a solution or tip how to prevent the scrolling?
Angular
https://github.com/lenkavon/pwa-double-tap-bug-ng
https://pwa-double-tap-bug-ng.firebaseapp.com
React
https://github.com/lenkavon/pwa-react-double-tap
https://pwa-double-tap-bug.firebaseapp.com
Steps to reproduce
- on iPhone iOS11.*, iOS12.*
- install the PWA app to homescreen add PWA to homescreen
- open the app from home - standalone mode
- tap the input to open the keyboard
- close keyboard
- double tap on any free space
Behavior: white panel arrives from bottom of the display (probably the 'space' for keyboard)
Expected behavior: zoom or nothing depending on meta tags.
https://i.makeagif.com/media/3-12-2019/WQwlCk.gif
For anyone who is having this issue,
this is a wacky yet simple workaround:
document.addEventListener("scroll", (e) => {
if (document.documentElement.scrollTop > 1) {
document.documentElement.scrollTop = 100;
}
});
Apple developers should be ashamed really
This is still a bug today in iOS13 but I have found a work around.
You can add an empty touchstart event listener to a parent element. Ideally you select an element that covers the entire viewport that isn't document.body. The event listener will prevent the double-tap from triggering the invisible keyboard.
Using your angular example, the problem is fixed with the following:
document.querySelector('app-root').addEventListener('touchstart', (e) => {});
Related
I have a Cordova (version 6.3.1) app. This issue only occurs on iOS version of the app (Android works fine). Every time i press on a text box to insert a text after doing some scrolling, it jumps straight back to the top. After some investigating, I found out that
DisallowOverscroll=true
in cordovas "config.xml" only works on the main screen of the app, not if I go and click on a "modal" "KompressionStromper" in the video (it does not work inside there), so how can I enable it inside there? So the behaviour is not like in video?
Please see video here on iOS 10.0.2 (during the first seconds i also try to pull at the main screen from top to bottom but there the "DisallowOverscroll" option works as expected).
Any other suggestions and help will be highly appreciated.
For the specific element you can disable overscroll with jQuery.
Like:
element.ontouchmove = (event) => {
event.preventDefault();
}
I strongly suggest that you also create a directive out of it, so it will be more done in a "angular way".
I have a cordova iOS app. When VoiceOver is active, I have few issues like cursor is not pointing to the top left while navigating between screens(it is pointing to the middle of the screen when navigated to next screen). Also I have few disabled elements, even it speaks disabled elements. How to avoid speaking of disabled elements when VoiceOver is active?
Also is there any way I can add instructions for particular element(like scroll to visit more options)?
I am developing an app (IOS platform) using HTML5, CSS3, angular and cordova(3.8) and stuck with an major issue.
I have a page with footer having three buttons. On click of each button a modal comes up from the bottom. Modal position is set to fixed and inside it as scroll-able container. scroll-able container contains a text area where user can input some text.
Whenever the modal comes up, text area is focused so that keyboard comes up by default. The issue is whenever native keyboard comes up webview is pushed up and entire modal gets scrolled.
I saw same issues been posted by others and I tried few solutions mentioned in reply for those questions like using ionic keyboard plugin, setting scrollTop to 0 on textarea focus. But nothing worked out.
In config.xml, I have set DisallowOverscroll to true.
It would be great helpful if someone help me with this issue ?
I am writing an app for IOS and Android using Flex 4.6. Everything is working fine on Android, but on IOS after the softkeyboard appears and the screen pans, when the keyboard is dismissed the screen never pans back down. The bottom half of the screen stays white and the top half remains shifted out of view. I have been searching online and through my code trying to figure out what could be wrong and I've had no luck. I have been running the program in debug mode, but no AS3 error messages are shown. My trace()s are printed, and the app will continue to work but obviously you are unable to interact with the top half of the app. Everything works fine if I set the softkeyboardBehavior in the XML to none, but then the user can't see where they are typing.
I have only been able to test this on my IPod touch with IOS 5.0.1. When I try to run my project in Flash Builders simulator neither the Android nor the IOS version will get past the splash screen.
Any help would be greatly appreciated
Thank you
I have seen that the softKeyboardDeactivate event from TextInput is not fired, as other actions that the unpan should cause are neither fired.
It seems it's a Flex 4.6 version bug. (http://forums.adobe.com/message/4068144).
I've found a workaround, it's a little tricky but it works.
Put a new TextInput hidden on top of the View, then on focusOut event on the original TextInput, force focus on the hidden TextInput. Softkeyboard event will be activated for that TextInput and the pan will return to the top of the View, then take off the focus from the new TextInput and the softkeyboard will disappear.
The user will not notice about this tricky solution.
<s:TextInput id="ghost" x="-100" y="0" width="0" height="0"/>
<!-- ... -->
<s:TextInput id="original" focusOut="textInputFocusOutHandler(event)"/>
...
public function textInputFocusOutHandler(event:FocusEvent):void
{
this.ghost.setFocus();
callLater(this.setFocus);
}
Try adding the "enter" attribute to your TextInput. It worked for me but now I have the issue where it jumps vs. pan when the soft keyboard deactivates.
It seems that my problem was that I was using the StageText skin for my text boxes, which adobe says in the documentation causes panning and any type of scrolling not to work. Switching to the old TextInput skin seems to fix the problem, but you loose all the native features for the soft keyboard, which pretty much ruins your user experience unfortunatly.
I have a cordova app. I have written some custom code in file for swipe actions using touch events, mouse events which will identify the touchmove and swipe. I have a hamburger menu at the top left corner of my app. On clicking this will open a side panel with some animation. on opening the app in latest ios 13, first time click anywhere on the screen is having MouseEvent with x,y,screenX,screenY,pathX,pathY values as 0. this triggers the hamburger menu which is at the top left corner of app and opens the side panel.
Why is the first time click event on screen returns x,y values as 0?
This issue doesn't occur in Android device or iOS <= 12.0 version. Only observed in iOS 13.
On removing my code specific to touch, swipe events. Then this issue is not replicable.
I have another observation. As ios13 supports the pointer events, I have just tried to add code related to pointerEvent
document.addEventListener('pointerdown', function() {
console.log('pointerdown event');
})
This worked for me without removing any code related swipe.
Why there is such difference in the behaviour with the code.
Thanks in advance.
Thank you for your description, we also effected by this issue. Sometimes we experience "ghost" clicks on previous clicked place in our cordova app.
Only happens with iOS13, with both UIWebView and WKWebView.
Seems pointerdown eventlistener is a workaround for this.