Weird behavior in Blackberry when toggling virtual keyboard between two textboxes - html

My web application is to be supported by iPhone, Android and Blackberry torch. The code is working fine except some issues. One of the major issues that i am facing is:
When on a page, there are some tags. Some of which contains a text box for letting user's entry. Everything is working fine on iPhone and Android. But in Blackberry, when i am toggling between textboxes by using taps i.e. first open virtual keyboard by tapping on one textbox, then tap on other textbox, then tap again on the other one. In such cases, my background screen that should be displayed at the background of virtual keyboard, becomes completely blank(like it is not repainted as soon as virtual keyboard is opening and closing). If i slightly scroll, i get the background back.
Does anyone know about this problem? Is there any way i can retain my background or kind of refresh it?

Related

Font Awesome Icons Behave Like Schrödinger's Cat on Mobile

I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.

Showing virtual keyboard on responsive design mode both in Safari and Chrome

I'm developing a responsive web app with a complicated UI. In order to demonstrate changes that I made, I'm checking out on responsive design modes both in Safari and Chrome. Is there any way that I can simulate keyboard appearing when I clicked on an input element as it occurs in a mobile Safari/Chrome.
For example, I pick iPhone X in responsive design mode in Chrome and Safari. Since the keyboard doesn't pops up when I click on an input, the scrolling behaviour is different than the experience on an iPhone device. In order to see the results of my change I need to deploy it to a server each time.
Is there a way to pop up the keyboard in responsive design mode?
After trying a bunch of solutions, I finally ended up with using Xcode iPhone simulators. I do the debugging with binding simulator and Safari developer console on my Macbook. If you select IO/Keyboard/Toggle Software Keyboard, then you would be able to see how your design might look on an iPhone when keyboard is visible.

Polymer <paper-checkbox> behaving erratically

I have completed the "Build an App" tutorial here: https://www.polymer-project.org/2.0/start/toolbox/set-up and have noticed that the paper-checkbox element is not behaving well - it will intermittently freeze at various stages of the re-render. For example, when it is in the unchecked state, and I tap it, it will freeze with the grey circle surround, but without actually displaying the tick in the checkbox. It will also freeze in other states as well.
I think the problem only occurs for screen gestures. I.e - it will fail on a mobile device for screen taps, and also on my Win10 laptop when I tap the (touch-sensitive) screen, but when I use the touchPAD on my laptop, it works reliably.
I am a raw beginner with Polymer. (and everything ;^)
This seems to be related to a known issue (PolymerElements/paper-checkbox Issue #156).
I can reproduce the buggy ripple animation on your site in Chrome 66 on macOS High Sierra when emulating mobile mode. It seems to intermittently occur after switching views (e.g., to View Three and then to New View) and then clicking the checkbox label (clicking the checkbox itself does not exhibit the problem).
Part of the problem is the checkbox's ripple has a "focus" state, where it shows the middle of the animation (the "frozen grey circle" you mention) when the checkbox gains focus. I'm not sure that's by design.
I recommend voting on the GitHub issue, or creating a new issue if you think it's a different problem.

WebApp input field gets overlayed by iOS Keyboard (only on iPad Air)

I developed a WebApp for a customer, which should be used with an iPad Air. The issue occurs on a form with several text-input fields. The form is designed to fit on a page without scrollbars on mobile devices (smartphones or tablets) in portrait mode (vertical). On my devices (Android Smartphone, Android Tablet and iPad Pro) everything works fine, but on the iPad Air of the customer the following issue occurs:
Whenever he tries to select an input field in the bottom of the page, the iPad keyboard overlays this input field and the user is not able to scroll up to make the input field visible. So the user has to fill the input field, while he is not able to see what he is typing, because the input field is behind the keyboard (obviously not optimal).
I would expect, that the keyboard is shrinking the web view and scrolling the input field to a visible area, which is the case on my iPadPro.
What do I have to do to get the expected behavior on the iPad Air?

HTML content freezes when keyboard is shown using cordova for iOS

I have a cordova app where there is some input fields which requires the keyboard. But when the keyboard is open it's like the app is frozen. More specific, I have a div as a bottom bar which has a fixed position, but when the keyboard is opened, it can scroll, however when I close the keyboard, everything returns to the expected position. Any idea how to make it not freeze? This is only a problem on iOS. Android works perfect.
My app has the same issue, selecting an input field causes the keyboard to show up and severely lag the app until the keyboard is hidden. After testing simple pages with no scripts or css on multiple devices I found that it primarily affects iPads on at least iOS 8.0 and above. It can cause slowdowns on iPhones but they seem to recover a lot faster.
The best solution I've found so far is to setup an in app keyboard. For my login page, I have an element that is styled as an input field and when it is clicked, it toggles a keyboard div element to appear which has buttons for each key inside it.