iOS 11 Safari bootstrap modal text area outside of cursor
I fixed the issue by adding position:fixed to the body when opening a modal. Hope this will help you.
mobile-safari
Stop Safari Mobile from giving input buttons rounded corners
If you add… input, textarea { -webkit-appearance: none; border-radius: 0; } Then your buttons will inherit any CSS styles that you have applied for other browsers.
Copy to clipboard using Javascript in iOS
Update! iOS >= 10 Looks like with the help of selection ranges and some little hack it is possible to directly copy to the clipboard on iOS (>= 10) Safari. I personally tested this on iPhone 5C iOS 10.3.3 and iPhone 8 iOS 11.1. However, there seem to be some restrictions, which are: Text can … Read more
A html5 web app for mobile safari to upload images from the Photos.app?
UPDATE: iOs 6 Safari is going to support upload videos and images from the Photo Library. ==== I hate this word, but, it’s impossible (up now). Here is the reasons: 1) mobile safari doesn’t support upload anything. 2) mobile safari can’t access ios components (actually it can, but, only through phonegap)
Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?
I found that “:hover” is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element “:hover”, while sometimes it drifts to other elements. For the time being, I just have a “no-touch” class at body. <body class=”yui3-skin-sam no-touch”> … </body> And have all CSS rules with “:hover” below “.no-touch”: .no-touch my:hover{ color: red; } … Read more
iPad Safari: How to disable the quick blinking effect when a link has been hit
You could set a transparent color to the -webkit-tap-highlight-color property of that element. a { -webkit-tap-highlight-color: transparent; }
Simplest way to detect a pinch
Think about what a pinch event is: two fingers on an element, moving toward or away from each other. Gesture events are, to my knowledge, a fairly new standard, so probably the safest way to go about this is to use touch events like so: (ontouchstart event) if (e.touches.length === 2) { scaling = true; … Read more
Can I change the viewport meta tag in mobile safari on the fly?
I realize this is a little old, but, yes it can be done. Some javascript to get you started: viewport = document.querySelector(“meta[name=viewport]”); viewport.setAttribute(‘content’, ‘width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0′); Just change the parts you need and Mobile Safari will respect the new settings. Update: If you don’t already have the meta viewport tag in the source, you … Read more
Javascript for “Add to Home Screen” on iPhone?
Until Safari implements Service Worker and follows the direction set by Chrome and Firefox, there is no way to add your app programatically to the home screen, or to have the browser prompt the user However, there is a small library that prompts the user to do it and even points to the right spot. … Read more
:active pseudo-class doesn’t work in mobile safari
<body ontouchstart=””> … </body> Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called ‘Fastclick’. It speed up click events on touch devices and takes care of this issue too.