I'm seeing some odd behaviour in iOS7 with my app that only demonstrates in iOS7.
When the keyboard comes up from the bottom it pushes the screen up to focus the input box. After the keyboard is dismissed a grey space remains where it was, leaving the rest of the window pushed up. Images below will demonstrate what I'm saying.
I'm using Sencha on this webapp.
While the images show the split keyboard, this occurs for both split and non-split keyboards
I can swipe down in the grey space to bring the rest of the view back onto the screen, but that isn't a solution.
What is the cause of this behavior and how can I avoid it?
Below is a slightly modified email that I sent out describing the cause of this:
After seeking an answer for our keyboard issue but coming up empty handed I think I figured out what is going on. It seems to be related to a bug in iOS 7.
Take a look at the attached ‘normal_behaviour.jpg’ file. This shows what the split keyboard looks like from iOS 6 to iOS 8. The input field I had selected on the Apple website was near the top of the page. When I touched it the web page slid up very slightly to ensure that the input field was still visible.
In the attached ‘unwated_behaviour.jpg’ file I found an input field close to the bottom of the screen and selected it. On both iOS 6 and iOS 8 the keyboard covers the input filed, however on iOS 7 the entire webpage is slid up so you can see the input field, which is great from a user friendliness perspective, but then when the keyboard is dismissed that grey area where the keyboard was remains, and the rest of the webpage does not slide back into place.
Also of note is that once you select an input field near the bottom of the page with a split keyboard you are able to slide beyond the end of a webpage in any other website you bring up within the same Safari session. You can see a few examples of it in ‘buggy_behaviour_other_pages.jpg’.
Of course with our app we are really using a Safari webview to display pages so we are vulnerable to the same issue when using the Split keyboard. The issue does not present itself with the full keyboard.
Unwanted behaviour.jpg
++++++++++++++++++++++++++++
Normal behaviour
++++++++++++++++++++++++++++
Buggy behaviour other pages
Related
This question is related to this other one (Android). A sample test case was also provided here
Basically, I can get past the "glitch" of losing the bottom screen under the keyboard that occurs sometimes when a single line TextField is focused by setting the TextField's bottom padding and making it a layer
But when the same glitch occurs to a multi-line TextField, each time the cursor is moved to a different line the keyboard follows the current line and hides everything underneath. I've been looking at TextArea and Component but I can't see anything there that stops this behavior. My "trick" of making the TextField a layer with bottom padding doesn't work in multi-line mode. I'm out of options, could this be enabled or alternatively is there some magic method somewhere I am missing?
Also, I've checked that calling getComponentForm().getInvisibleAreaUnderVKB() returns 0 when the glitch occurs
I think you need to re-open the applicable issue. This code is very platform specific as the virtual keyboard behavior is handled 100% within the Android port.
Android doesn't implement getInvisibleAreaUnderVKB() since the VKB doesn't work that way in Android. It resizes the screen instead to provide the additional space. It will generally try to get the top area where your cursor is. That's the chief goal.
When the screen is empty that might look problematic but when your screen is full of data we'd rather see the data than have the full text component in view. Unfortunately, the native editing code has no way to distinguish between the two cases. We might be able to come up with a workaround but with these things there are often issues/regressions.
Solution to prevent this consists in setting the Form's setFormBottomPaddingEditingMode(true);. Easy fix! 👍
One of my Form contains a BrowserComponent. My Form has a non-white bcakground color (when Dark Mode is on)
No matter what I set the browser's background color to, when I showBack() the previous Form, a brief flash is shown in the space the BrowserComponent occupies
Here is a video showing this on iOS
https://imgur.com/a/QhhZ0ZY
On Android, the effect is slightly different. The space the BrowserComponent occupies is initially drawn white/gray/black (randomly) while the Form is in transition (in & out)
That seems like a bug in browser component that was probably missed due to the default background color. Please file an issue with this. If you can isolate this to a test case for that issue it would help too.
It looks like createPeerImage in the iOS port should accept a background color but it might be something else.
I have an interactive pdf document that is displayed fullscreen. there's a navigation bar that users can press to jump to different pages.
What I need is some sort of looping screensaver (a collection of photos) that can be enabled by the user pressing a button.
I considered dropping in a video of a slideshow that I made in after effects, until I realised it's not that easy to loop the playback of that video!
How can I loop a video that I have placed onto a page in a pdf? I've read somewhere about swf's looping but I've tried that and there's no loop option when I place the file in acrobat?
Can someone give me some advice as I thought it would be pretty straightforward to loop a video and now it's looking far from easy.
Thanks
If it is just a slide show, meaning changing images at regular intervals, a few things could be done with Acrobat/Reader's on-board means.
In Full Screen, Acrobat allows to cycle through pages every whatever second. A button on those "screensaver" pages would get back to a "real" page. The question is whether that would interfere with the rest of the document.
Another approach would be having a Button field, icon only, read-only, no action, where you would show an image (preferably PDF) as an icon, and have a control loop running (using interval, timeout) loading different icons. This could be implemented with quite little JavaScript.
In my game you can control the character by moving left and right, jumping and attacking. (This is a mobile game) I have a button that I use to jump and attack, which is easy because I just make a button and jump or attack with OnClick(). But for moving, I don't know how to find out if the user is pressing the button, I only know when it is clicked. How can I find this out? thanks.
If you dont understand what Im trying to say, basically here is my web game: http://dugelstudios.weebly.com/weapon-plus-plus.html
(Does not work on chrome, using safari or internet exploror)
and i am porting it to mobile, and i dont know how to make the player move left and right with touch controls.
You can use other MonoBehaviour methods such as OnMouseOver to check if a button is pressed, OnMouseEnter when a user begins to press a button, and OnMouseExit to check if a user has released the button.
You can also use OnMouseUpAsButton to mimic the behaviour of Button.onClick
For draggings movements, (like movement. For example, if you have a thumbstick, or something similar for movement), you can use OnMouseDrag.
Also, completely unrelated to your question, but something you have mentioned, you can enable NPAPI to enable WebPlayer builds in Chrome.
Just paste chrome://flags/#enable-npapi in a new tab in Chrome, and click the "Enable" button to get it running
I believe there is a thumb stick asset the standard Unity asset pack that's available on the store.
We've got a fairly basic implementation of the PivotViewer that we've put on a HP touch screen PC. Everything works as expected - and on the left hand pane you can select options, clear options etc.
The problem is when you select a card, the right hand pane is displayed as expected, but if you choose an item from this right hand pane (although this action works and the screen animates to show the new results) the next time you select an item the right hand pane is blank.
You get this behaviour even when you use the mouse on the touch screen.
Does anyone have any ideas please?
This same implementation works fine on every other PC - just not the touch screen where it is to be deployed!!
Although other samples I downloaded gave the same behaviour on the touch screen I found that a sample showing a custom details pane sorted things out.
I downloaded the sample from here:
http://tonychampion.net/blog/index.php/2011/10/sl5-pivotviewer-custom-detailpanestyle/
It worked much better on the touch screen anyway as I made big buttons on my custom pane, rather than the hyperlinks that were there before.