I am having a strange bug in ios safari where a position:fixed sidebar with an input in it which allows a user to perform a search query. Everything is fine when to scrollTop of the page is 0 (no scrolling occurred, top of page). At this state the input is focusable and the user can enter stuff in the input. However when the user scrolls a few pixels down the input is no longer focusable and the user can not input anything, nor does the keyboard show.
Anyone else ever encountered this bug or know a fix/hack that could solve this?
Thanks,
K.
This is not bug, when you tap the textFiled it becomes FirstResponder and you can enter text in it using keyboard. When you scroll the scrollView, textField will resign as FirstResponder and scrollview will become FirstResponder. So now you want be able edit text in textfield unless you tap it again.
Regarding keyboard not showing up, this is because when textfield resigns as FirstResponder it will call textFieldShouldEndEditing: delegate method and you might be returning YES in this method.
I changed all fixed containers to absolute positioned containers and now it works. Guess position:fixed still has some side effects in ios safari.
Related
I'm trying to figure out how to prevent a popup image from poping up and down repeatedly (forever) when the user moves the mouse to a location on the page.
See https://codesandbox.io/s/jitterbug-on-popup-25kp4 to illustrate the problem. Hover over the text Mouse over this and the Jitter Image will appear to see the jitter problem.
EDIT: Since this was originally posted, I incorporated the solution into the code showing the problem, and now it also shows a solution.
Details
What follows is a text description of the problem, but the code does illustrates the problem as well (and with a lot less text).
On a web page, that has a vertical scroll bar,
The user moves the mouse over a div which has a MouseEnter javascript handler.
the on MouseEnter event fires which causes an image to pop up.
The popup causes the scroll bar to scroll the content. So now, the mouse is no longer hovering over the hover item so the MouseLeave event fires which causes the image to pop down.
With the image no longer being displayed, the scroll bar moves the content back to where it was prior to the popup and viola, the mouse is overtop of the div and the MouseEnter event fires again to pop up the image.
Steps 2-4 repeat forever at the speed at which the browser can keep up.
Or when the user moves the mouse to stop the popup/popdown from happening.
I've seen this happen on some other websites and now that it's happening to me, I want to fix it but I'm not sure how to.
I've searched for a solution but haven't found one yet. Here are some links I found:
https://css-tricks.com/content-jumping-avoid/ - This was good but suggests using min-height which doesn't work in my situation.
I've also tried using overflow: hidden which does prevent the jitter effect described above but leaves the user with no way to see the rest of the popup image. This, however, is a better solution than the jitter effect described above.
I'm using AngularJS and JQuery if that affects the answer.
position:absolute on the image, will solve this as it won't change the current flow when you display the image and the scroll bar will remain in it current position.
I am using a full-screen flipview to allow a background to rotate behind a set of inputs. if you tap the input textbox, the SIP keyboard appears.
however, tapping outside of the textbox does not dismiss the keyboard as expected. I finally realized it is because of the flipview. I verified this by adding a 250 margin around the flipview. if i tap in the area covered by the control it still doesn't dismiss, but if I tap the areas covered by the margins (that is, outside the flipview) the SIP does dismiss as expected.
I tried setting IsTabStop to false and IsTapEnabled to false for the flipview, but the SIP still remains active unless i tap outside the flipview.
since we need the flipview to be full screen, I need to know if there is a way to disable the control so that it closes the keyboard.
can this be done? which property or event on the flipview can I leverage to make this happen?
aha, by handling the "tapped" event I did the old trick of disabling and enabling the flipview and sure enough the keyboard dismissed!
When my app starts the first textbox has focus. This doesn't really matter when running on a desktop, but when it runs on a tablet it means the onscreen keyboard pops up and obscures half the screen.
How can I prevent any control having focus when the app first starts?
Place a button on your page with an earlier TabIndex:
<Button
IsHitTestVisible="False"
Opacity="0"
TabIndex="1" />
A few things to note:
Setting visibility to Collapsed doesn't work since the engine likes to focus the first Visible control
You need IsHitTestVisible="False" so users don't accidentally click it and it doesn't accidentally block clicks to anything else on the page.
Another control type could work, but it shouldn't be a TextBox since it would still bring up the virtual keyboard.
Setting IsTabStop="False" on your TextBox doesn't work since then it can't get focus at all.
I believe there is no way to simply remove focus other than setting IsTabStop to false on all controls, but the workaround might be to place an invisible control (e.g. UserControl with IsTabStop set to true and Opacity set to 0) with a lower tab index in your page.
Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half the time, it looks like the button is clicked (i.e. changes on mousedown/mouseup), but nothing happens and we have to click again. If we simply remove the css styling, the button works fine all the time.
Example:
Our users really like the look of the styled buttons, but are a bit annoyed by not knowing if the click event went through. Any easy way to solve this?
Update
I was finally able to neatly reproduce this in jsfiddle: http://jsfiddle.net/xRK4C/3/ . You can see the behavior if you click on the upper left few pixels of the button with the rounded corner. I'm thinking it's because the button moves when being clicked, which causes the mouse to be outside the button on mouse-up. Our users wanted this though, so is there any good way to keep the 3d effect without sacrificing click area?
I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.
EDIT: Margins don't work either, neither a CSS 2 translation.
You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.
Went to the JSFiddle site and played around with the styling there.
I noticed the hover was successful on the edge of the button, but the click was not.
So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.
I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here:
http://kentbrewster.com/android-scroller/scroller.html
... which works like a charm. When I attempt to add an INPUT tag to my header, however, I hit trouble. On focus, every device I've tried so far clones the INPUT tag, gives it an infinite Z-index, and repaints it on top of the old tag. The clone is in roughly the right position, but most of its parent's CSS (including, of course, position:fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and when I scroll the body of the page, it scrolls up and off the screen.
Once it's off screen, hilarity ensues. Sometimes the device will force the scrolling part of the body back down so the cloned blank is back in view; sometimes the keyboard goes away even though the visible box seems to remain in focus; sometimes the keyboard cannot be dismissed even though the INPUT blank is clearly blurred. Here's an example you can run on your Android 2.2 device to see what's happening:
http://kentbrewster.com/android-input-style-bug/
Styling input:focus has not done the trick for me yet, nor have many different brute-force attempts to listen for focus() and blur() with JavaScript and do the right thing with focus and the keyboard.
Thanks very much for your help,
--Kent
This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.
The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.
The solution is to add:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
in your css.
You might be able to solve it by using a bug in Android: http://code.google.com/p/android/issues/detail?id=14295.
That is, don't display the input field right away. Instead, display an overlay div which listens on click and hides itself and shows the hidden input, and give the input focus. This somehow prevents Android from using the wierd input that gets placed on top of everything, and is instead using the browsers input field which you can style any way you want.
As you'll note in the bug raport though, this doesn't work with input[type="number"]...