We Keep Coding

AngularJS UI partially blank/white when scrolling or providing input on mobile

Our angularjs site seems to be having issues with page size on mobile. It seems that when you pull up an input (dropdown or text), some area of the page behind the buttons and inputs goes white.
Regardless of where you are providing input, the white area starts at a particular spot on the page and stretches all the way to the bottom.
I've tried using Safari to inspect the DOM on mobile but I can't seem to figure out where to start debugging this. Any ideas?
On input
On scroll

Make mouse cursor visible [duplicate]

I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.

This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?

I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/

Prevent cursor from hiding in Browser after key is pressed

I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.

This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?

I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/

Zoom out automatically on iPhone safari browser using javascript

I have designed my webpage to fit an Iphone screen perfectly. It has a small text box in the top corner.
When the user clicks on the text box to type in the text, the Iphone browser automatically zooms into the top corner of the screen, which is totally cool. But after the user hits search the browser is still zoomed into the top corner. The user has to manually zoom out to see the full screen.
Hence I would like to know a way to fix this issue by calling a javascript that will zoom out automatically and shows the full web page.
Thanks

I'm having the same problem/requirement, so I was hoping to find an answer here (which I haven't).
Here is what I've got so far:
Add an 'onblur' event handler to the text box mark-up (in the HTML, where you declare the text box).
The callback is triggered after the 'Done' button is pressed.
At this point, I'm not sure how to zoom out back to the previous zoom-level.

iPad webApps on screen keyboard

I have an HTML web-app which runs in a viewport. The web-app does not scroll. It is all contained within one screen.
I added a text-field into my app. When I press the input field the on-screen keyboard pops up.
1. The keyboard pushes the web-app upwards for some reason (The view-port defines a resolution which should not allow scrolling).
2. When I am done the app stays "scrolled" off-screen.
Is there a way to fix this? Is there a way to control the keyboard using Javascript/CSS?

Crude, but can you handle the blur event on the form field then call window.scrollTo(0,0)?