I know this question has been asked so much. But have there been any updates on being able to disable pinch zoom on the latest version of safari?
I have a map application that implements pinch to zoom on specific elements of the webpage (the map). I want users to be able to zoom in on the map, while the UI around the page stays the same. This has destroyed my users experience on IOS.
Is there a way to at least disable pinch to zoom on specific elements?
Here is my webpage so you can see exactly what I'm talking about. I hope you can see why disabling viewport zoom (at least when the user pinches on the map) would actually be a benefit, for accessibility.
https://www.yapms.com/app/?t=USA_2020_presidential
more info:
I'm using hammerjs to zoom in on specific elements on the webpage already, so I want to disable apples viewport zoom on those elements.
Maybe this event listener on the document will help
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
Resource: disable viewport zooming iOS 10+ safari?
Please see Casper Fabricius answer for detailed elaboration about this
None, of the JavaScript solutions worked for me. What I did to fix the issue on IOS was to add the following CSS to each element that I wanted to prevent the default zoom action on.
touch-action: none;
I think the most likely use case for apps built with web tech will be that you do not want the user to manually pinch zoom, but you still need them to scroll in the Y co-ordinate. You can enable this on the whole app by targeting the html tag in css. Disabling pinch zoom is necessary for web based "apps" to behave like "apps". Accessibility can be accommodated in different ways, such as offering preferences to adjust text sizes. I tested this on Safari and Edge on iPhoneX OS ver 13.5.1
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust: none;
touch-action: pan-y; /*prevent user scaling*/
}
</style>
I have used a combination of touch-action and pointer-events to disable all gestures everywhere and allow basic touching only on interactive elements. Works well in Safari in iOS 15. Can be modified to allow some gestures, e.g., by replacing none by pan-y etc. I have used it to implement control panels or games that involve quick touching of buttons, which lead to unwanted zoom and scroll gestures.
* {
touch-action: none;
pointer-events: none;
}
input, button {
pointer-events: auto;
}
Also, fixed position efficiently bypasses scrolling and keeps the elements on the screen.
html, body {
position: fixed;
}
Related
This question requires some explaining, so please bear with me.
Contrary to popular belief, inertia scrolling (the very smooth 60fps scrolling) is not enabled on web pages in Mobile Safari by default. As it makes a world of difference in user experience, I have enabled it by dynamically applying this CSS to the HTML and BODY element of the page, after a Modernizr test for iOS specifically:
<style>
.touchscroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
height:100%;
}
.touchscroll body {
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
</style>
The above basically makes the body element a scrollable element and by means of -webkit-overflow-scrolling: touch, one gets the smooth intertia scrolling effect on the entire page. Some more background on this solution can be found here (disclaimer: article by myself).
It works, so far, so good. The problem is that this solution effectively disables another highly desired behavior of Mobile Safari: normally, when scrolling down, it will make the address bar smaller, and hide the bottom bar of the browser entirely. They re-appear when scrolling back up.
Unfortunately, the above technique disables this for some reason. Yes, we've got super smooth scrolling, yet the browser bar is always large and the bottom bar permanently stays visible, both taking up valuable space.
My question therefore is, can I have both? I want the super smooth scrolling on the entire page, yet I also want the default hiding behavior of browser elements when scrolling.
An example of a site where I am using this is here:
http://www.jungledragon.com/
If you open that in Mobile Safari, you will see the smooth scrolling, yet not the hiding of browser elements when scrolling down.
I think you're setting both the <html> and the <body> element to scroll. You should apply these CSS rules to 1 element you want to be able to scroll.
So either the html or body, not both.
Here is plnkr example.
Basically there is a style like that
.hover-block {
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.hover-block:active {
pointer-events: none;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.hover-block:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
I'm seeking to support evergreen and IE10/11, Chrome for Android (4.4+), Mobile Safari (iOS 7+), and it shouldn't hurt other touch events (swipe scrolling).
It seems to work as intended on Android and Chrome device emulation, non-sticky transform on touch is desired behaviour.
But somehow this plunker doesn't work on iOS webkit (iOS 8, all browsers), it does nothing on touch. I'm quite sure that exactly the same approach (block element, :active with pointer-events: none plus :hover) worked for me in iOS 8 before. How can it be fixed?
It looks like empty touchstart/touchend JS event handler or ontouchstart/ontouchend attribute can activate touch behaviour on iOS (can't be sure but it is possible that it happened to me before). Is it a known fix for the problem or there are less hacky ones, which iOS versions are affected?
In your html, instead of <body>, do <body ontouchstart="">
Or in html5, just <body ontouchstart>
So the issue you're running into is this: "The :active pseudo class matches when an element is being activated by the user". A standalone <div> element cannot be activated by the user and therefore will not be matched by the :active pseudo class.
If you look under Browser Compatibility in the :active MDN article you'll see that:
[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.
MDN has a list of pseudo classes that can be used and you might be able to find one that better fits your situation or adding a touchstart event should do the trick in Safari.
I was able to get your plnkr working really quick by changing the <div class="hover-block"></div> element to <button class="hover-block"></button> and changing .hover-block:active { to .hover-block:focus {. I also added display: block; border: 0; to .hover-block.
You, for obvious reasons, may not want to change your <div> to a <button> to get your effect to work, but by using an element that can be activated, using a different pseudo class, or adding an event that allows activation in your target browser, you should be able to achieve the effect you're looking for on mobile devices.
Hope that helps!
Is it possible to add momentum/intertia scrolling to a trigger.io-wrapped HTML5 iOS app?
I'm currently building a basic app, and noticed that the Webview does not respond to the momentum of a swipe action when scrolling through content (iOS 6; iPhone 5). In other words, a slow swipe and a fast swipe end up scrolling to the same section of the Webview (unlike a native app, where said fast swipe should scroll to a farther section).
Is it possible to change this behaviour and make it more native-like? I have tried following these iOS momentum scrolling instructions and modifying the CSS as shown below, however this doesn't work:
html {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
As a workaround I feel that I could potentially use an intertia-emulating JS library within my webview, however I want to avoid this option if possible.
Thanks in advance!
I don't know much about your app's css, but -webkit-overflow-scrolling: touch; would only give the touch scroll inertia to fixed or absolute elements with fixed height/width in the viewport. Applying -webkit-overflow-scrolling: touch to the body or html element would only work if you did something like
body {
position:fixed;
top:0;
right:0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
We use it in our trigger app to emulate UITableView
Yes. Try out Hojoki where you can see momentum scrolling in action:
https://itunes.apple.com/us/app/hojoki/id525010205?mt=8
You don't have to do anything special to enable momentum scrolling in iOS. If you're not seeing it then it is likely that some styling or 3rd party library you're using as intefered with it.
Yes. I've managed to implement it with iScroll but had to modify the library. I really don't recommend -webkit-overflow-scrolling: touch as it does not render any DOM changes while momentum scrolling is occuring. So if you reize an element as a result of an element scrolling, it looks awful.
Here is my repository where I've added a new callback onScrolling() to alert when the scrolling animation is occurring in iScroll: https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js
And here's an example I'm using in my Trigger.io app where I change the height of the div during momentum and touch scrolling: http://jsfiddle.net/simpleshadow/wQQEM/22/
when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well,
but it causes touch events stopping work out of the scrolling area.
Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27: I have fixed this problem but I still no wonder the real reason.
In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.
I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:
When resizing the element, I'm resetting the -webkit-overflow-scrolling to auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
Hope this helps!
This is caused by having an <iframe> on the page. Many scripts create <iframes> to do their work including social tracking buttons (Facebook, Twitter, G+), analytics tracking (Google, etc.), and libraries like PhoneGap.
It doesn't matter how the <iframe> is displayed. display: none; visibility: hidden; width: 0; height: 0 does not fix it. If an <iframe> is on the page it will happen, sometimes intermittently and sometimes always.
The only solution I've found so far (which is turning out to not be very workable in a production app) is to delete all <iframes> on the page, create them only when needed (for example, when I need to call a PhoneGap API), and then delete them when finished.
I confirm I saw the same issue on a web app using extensively touch events and list scrolls.
Before iOS5 I was using iScroll, and everything was working fine;
With iOS5, I used -webkit-overflow-scrolling:touch to scroll lists to get faster scrolls.
The consequence is I met random occurrences of touch events no more working on various parts of the app. The issues generally occur after I scrolled a list. it affects randomly elements outside the scrolled area, typically a footer menu.
Reloading the app when in 'frozen touch' state doesn't unfreezes it : to unfreeze it, I had to close the safari tab, open a new one and reload, until I met again the issue while using the app.
The issue is seen on iPad2, iPhone 4, iPhone 3GS, all on iOS 5.0
Eventually, I deactivated the overflow touch scroll and came back to iScroll, and things work well as in iOS4 .
-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch stops responding.
My phonegap app will work fine until I make a call to a Phonegap API, at which point the touch will stop responding on mainly the first element that has a event attached to it in the current view. A view for my app is body > div.current with the rest of the divs display none.
I can replicate this every time.
It is clearly a bug in iOS5.
Here's a variation on a few of the answers already listed.
My specific issue was that reorientation caused scrolling to stop working completely when -webkit-overflow-scrolling: touch was applied to an element.
Example: Landscape orientation is shorter and needs a scrollbar. Portrait is tall enough that no scrollbar is needed. Reorient to landscape; scrollbar is present but non-functional.
listen for the orientationchange event
do something which triggers a layout change on the scrolling element
ensure that the change is significant enough that the rendering engine doesn't optimize it away. For example, hiding then immediately showing does not seem to do anything. Anything that uses setTimeout() seems to work (perhaps it is the different execution context, I don't know).
Fading in and out works, or hiding and then showing with a short delay works (though it flashes). #Sari's solution for changing the scroll properties works and does not cause any visible redraw.
$(window).on("orientationchange", function () {
// use any valid jQuery selector
var elements = $("[data-touchfix=true]");
elements.css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () {
elements.css("-webkit-overflow-scrolling", "touch");
}, 100);
});
Note that I haven't tested this fix beyond my iPad 3 other than to ensure that it doesn't cause script errors in Chrome or IE 7/8/9.
In case this is of any use...Incorporating PhoneGap I was using Zepto to append ajax-loaded, scrollable content into the dom. I was then applying a css transition on it. There were no iFrames on the page.
I was experiencing the same issue as mentioned here, where scrolling would just stop working. When I copied the generated code into a separate file and tried that on the iOS simulator - everything worked as expected.
I eventually got it to work by querying the height of the parent container - just before the css transition. By adding var whatever = $('#container').height(); the scrolling worked.
To improve a little bit ThinkingStiff's excelent answer, you can avoid blinking
- if overflow:hidden is set
- if instead of 'auto' value just remove property:
$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);
I have some css menus on my site that expand with :hover (without js)
This works in a semi-broken way on iDevices, for example a tap will activate the :hover rule and expand the menu, but then tapping elsewhere doesn't remove the :hover. Also if there is a link inside the element that is :hover'ed, you have to tap twice to activate the link (first tap triggers :hover, second tap triggers link).
I've been able to make things work nicely on iphone by binding the touchstart event.
The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my touchstart events!
I know this is the problem because when I disable all the :hover rules manually in the css, mobile safari works great (but regular browsers obviously don't anymore).
Is there a way to dynamically "cancel" :hover rules for certain elements when the user is on mobile safari?
See and compare iOS behavior here: http://jsfiddle.net/74s35/3/
Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;
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;
}
Somewhere in the page, I have javascript to remove no-touch class from body.
if ('ontouchstart' in document) {
Y.one('body').removeClass('no-touch');
}
This doesn't look perfect, but it works anyway.
:hover isn't the issue here. Safari for iOS follows a very odd rule. It fires mouseover and mousemove first; if anything is changed during these events, 'click' and related events don't get fired:
mouseenter and mouseleave appear to be included, though they're not specified in the chart.
If you modify anything as a result of these events, click events won't get fired. That includes something higher up in the DOM tree. For example, this will prevent single clicks from working on your website with jQuery:
$(window).on('mousemove', function() {
$('body').attr('rel', Math.random());
});
Edit: For clarification, jQuery's hover event includes mouseenter and mouseleave. These will both prevent click if content is changed.
A better solution, without any JS, css class and viewport check: you can use Interaction Media Features (Media Queries Level 4)
Like this:
#media (hover) {
// properties
my:hover {
color: red;
}
}
iOS Safari supports it
More about:
https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/
The browser feature detection library Modernizer includes a check for touch events.
It’s default behavior is to apply classes to your html element for each feature being detected. You can then use these classes to style your document.
If touch events are not enabled Modernizr can add a class of no-touch:
<html class="no-touch">
And then scope your hover styles with this class:
.no-touch a:hover { /* hover styles here */ }
You can download a custom Modernizr build to include as few or as many feature detections as you need.
Here's an example of some classes that may be applied:
<html class="js no-touch postmessage history multiplebgs
boxshadow opacity cssanimations csscolumns cssgradients
csstransforms csstransitions fontface localstorage sessionstorage
svg inlinesvg no-blobbuilder blob bloburls download formdata">
Some devices (as others have said) have both touch and mouse events. The Microsoft Surface for example has a touch screen, a trackpad AND a stylus which actually raises hover events when it is hovered above the screen.
Any solution that disables :hover based on the presence of 'touch' events will also affect Surface users (and many other similar devices). Many new laptops are touch and will respond to touch events - so disabling hovering is a really bad practice.
This is a bug in Safari, there's absolutely no justification for this terrible behavior. I refuse to sabotage non iOS browsers because of a bug in iOS Safari which has apparently been there for years. I really hope they fix this for iOS8 next week but in the meantime....
My solution:
Some have suggested using Modernizr already, well Modernizr allows you to create your own tests. What I'm basically doing here is 'abstracting' the idea of a browser that supports :hover into a Modernizr test that I can use throughout my code without hardcoding if (iOS) throughout.
Modernizr.addTest('workinghover', function ()
{
// Safari doesn't 'announce' to the world that it behaves badly with :hover
// so we have to check the userAgent
return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
});
Then the css becomes something like this
html.workinghover .rollover:hover
{
// rollover css
}
Only on iOS will this test fail and disable rollover.
The best part of such abstraction is that if I find it breaks on a certain android or if it's fixed in iOS9 then I can just modify the test.
Adding the FastClick library to your page will cause all taps on a mobile device to be turned into click events (regardless of where the user clicks), so it should also fix the hover issue on mobile devices. I edited your fiddle as an example: http://jsfiddle.net/FvACN/8/.
Just include the fastclick.min.js lib on your page, and activate via:
FastClick.attach(document.body);
As a side benefit, it will also remove the annoying 300ms onClick delay that mobile devices suffer from.
There are a couple of minor consequences to using FastClick that may or may not matter for your site:
If you tap somewhere on the page, scroll up, scroll back down, and then release your finger on the exact same position that you initially placed it, FastClick will interpret that as a "click", even though it's obviously not. At least that's how it works in the version of FastClick that I'm currently using (1.0.0). Someone may have fixed the issue since that version.
FastClick removes the ability for someone to "double click".
There are basically three scenarios:
User only has a mouse/pointer device and can activate :hover
User only has a touchscreen, and can not activate :hover elements
User has both a touchscreen and a pointer device
The originally accepted answer works great if only the first two scenarios are possible, where a user has either pointer or touchscreen. This was common when the OP asked the question 4 years ago. Several users have pointed out that Windows 8 and Surface devices are making the third scenario more likely.
The iOS solution to the problem of not being able to hover on touchscreen devices (as detailed by #Zenexer) is clever, but can cause straightforward code to misbehave (as noted by the OP). Disabling hover only for touchscreen devices means that you will still need to code a touchscreen friendly alternative. Detecting when a user has both pointer and touchscreen further muddies the waters (as explained by #Simon_Weaver).
At this point, the safest solution is to avoid using :hover as the only way a user can interact with your website. Hover effects are a good way of indicating that a link or button is actionable, but a user should not be required to hover an element to perform an action on your website.
Re-thinking “hover” functionality with touchscreens in mind has a good discussion about alternative UX approaches. The solutions provided by the answer there include:
Replacing hover menus with direct actions (always visible links)
Replacing on-hover menus with on-tap menus
Moving large amounts of on-hover content into a separate page
Moving forward, this will probably be the best solution for all new projects. The accepted answer is probably the second best solution, but be sure to account for devices that also have pointer devices. Be careful not to eliminate functionality when a device has a touchscreen just to work around iOS's :hover hack.
The JQuery version
in your .css use
.no-touch .my-element:hover
for all your hover rules
include JQuery and the following script
function removeHoverState(){
$("body").removeClass("no-touch");
}
Then in body tag add
class="no-touch" ontouchstart="removeHoverState()"
as soon as the ontouchstart fires the class for all hover states is removed
I agree disabling hover for touch is the way to go.
However, to save yourself the trouble of re-writing your css, just wrap any :hover items in #supports not (-webkit-overflow-scrolling: touch) {}
.hover, .hover-iOS {
display:inline-block;
font-family:arial;
background:red;
color:white;
padding:5px;
}
.hover:hover {
cursor:pointer;
background:green;
}
.hover-iOS {
background:grey;
}
#supports not (-webkit-overflow-scrolling: touch) {
.hover-iOS:hover {
cursor:pointer;
background:blue;
}
}
<input type="text" class="hover" placeholder="Hover over me" />
<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />
Instead of only having hover effects when touch is not available I created a system for handling touch events and that has solved the problem for me. First, I defined an object for testing for "tap" (equivalent to "click") events.
touchTester =
{
touchStarted: false
,moveLimit: 5
,moveCount: null
,isSupported: 'ontouchend' in document
,isTap: function(event)
{
if (!this.isSupported) {
return true;
}
switch (event.originalEvent.type) {
case 'touchstart':
this.touchStarted = true;
this.moveCount = 0;
return false;
case 'touchmove':
this.moveCount++;
this.touchStarted = (this.moveCount <= this.moveLimit);
return false;
case 'touchend':
var isTap = this.touchStarted;
this.touchStarted = false;
return isTap;
default:
return true;
}
}
};
Then, in my event handler I do something like the following:
$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
,function handleClick(event) {
if (!touchTester.isTap(event)) {
return true;
}
// touch was click or touch equivalent
// nromal handling goes here.
});
Thanks #Morgan Cheng for the answer, however I've slightly modified the JS function for getting the "touchstart" (code taken from #Timothy Perez answer), though, you need jQuery 1.7+ for this
$(document).on({ 'touchstart' : function(){
//do whatever you want here
} });
Given the response provided by Zenexer, a pattern that requires no additional HTML tags is:
jQuery('a').on('mouseover', function(event) {
event.preventDefault();
// Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
if (jQuery(event.target).children('.dropdown').is(':visible') {
// Hide your dropdown nav here to unstick
}
});
This method fires off the mouseover first, the click second.
For those with common use case of disabling :hover events on iOS Safari, the simplest way is to use a min-width media query for your :hover events which stays above the screen width of the devices you are avoiding. Example:
#media only screen and (min-width: 1024px) {
.my-div:hover { // will only work on devices larger than iOS touch-enabled devices. Will still work on touch-enabled PCs etc.
background-color: red;
}
}
For someone still looking for a solution if none of the above worked,
Try this,
#media (hover: hover)
{
.Link:hover
{
color:#00d8fe;
}
}
This hover pseudo will only be applied for devices with pointers and works normal on touch devices with just .active classes.
Just look at the screen size....
#media (min-width: 550px) {
.menu ul li:hover > ul {
display: block;
}
}
heres the code you'll want to place it in
// a function to parse the user agent string; useful for
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
var pattern = new RegExp(vs, 'i');
return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
// iPad specific stuff here
}