Currently I am working on a web app for mobile devices where I am using javascript events to move the focus from one contenteditable div to another. On most mobile devices, everything is fine and the keyboard does not hide. I have tested this on android firefox and chrome, and on iOS5 and iOS6 safari. On iOS6 safari I have found that moving focus from one div to another will close the keyboard and not change focus, instead of keeping the keyboard displayed like on all other browsers.
For example, if I have
<div contenteditable="true" id="1">Stuff</div>
<div contenteditable="true" id="2">Things</div>
and
$("#1").on("keydown", function() {
$("#2").focus();
});
$("#2").on("keydown", function() {
$("#1").focus();
});
then I would expect to alternately be typing characters in each div, which is what happens on most mobile browsers except for iOS6 safari.
You can find a simplified example at a JSfiddle I made at http://jsfiddle.net/8jj56/2/
How can I get the same kind of keyboard behavior for iOS6?
Related
I created a modal using react-native-modalfy(because of its universal usage) that has an input field. On android everything is working as expected(i.e., modal moving up when keyboard aperars) but on the iOS, whenever I try to type something the keyboard appears on the modal UI and doesn't allow me to see anything that happens on the modal UI. Is there any workaround to get past this issue?enter image description here
It works as expected on Android, but on iOS it opens camera and only after exiting the camera app it leaves the snapshot in the canvas.
How do I make iOS handle display camera feed in HTML?
I'm posting a (non-functional) fiddle, to illustrate the html and the initialization methods.
https://jsfiddle.net/nz41b2kq/
{ some code to appease the SO algorithm }
The solution was to use "playsinline" attribute in the <video> element.
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
I'm having a trouble with full-screen toggle of videojs HTML5 Player.
Here, I've got two videos on a page (https://yiddishevinkel.com/archives/9555) where the main video looks ok. But the video in sidebar, I'm not able to switch to full screen mode. When i hit the full-screen toggle, It switches to full screen and immediately gets exited from the full screen mode with "Exited fullscreen because fullscreen element was removed from document." warning in Firefox console.
Note that, Issue persist with single instance of video on page and chrome as well.
Without even consulting the fullscreen api documentation, it seems likely from the message you are getting that videojs is replacing an element and you are invoking requestFullScreen on that element or one of its children. An element that does not exist cannot be displayed full screen, therefore the mode exits, a behaviour that is both documented and pretty obvious from the message.
Solution: don't. Wrap it with a div and invoke requestFullScreen on that.
I have top menu in Ipad with position: fixed and width: 100% in my site, which is displayed fine, when keyboard is shown and orientation is changed (f.e., from Landscape to Portrait) in Safari IOS5, but not in IOS6.
In IOS6 after this actions top menu becomes shifted to right at 128px. I found some very close problem, related exactly to 128px in StackOverflow iOS6 Safari orientation change bug?, but solution was not applicable to my case.
So, investigating a little, I changed in javascript event "orientationchange" the CSS property of top menu position:fixed to position:relative.
And that helped, my top menu redrew correctly. But, as I needed exactly position:fixed later for my site, I added setTimeout() method, which returned CSS position back to value fixed.
$(window).bind("orientationchange", function(e){
$('#framecontentTop').css('position', 'relative');
setTimeout(function(e){
$('#framecontentTop').css('position', 'fixed');
}, 500)
});
I think, it is the temporary solution. Does somebody know real root cause of a problem, or it is IOS6 bug?