I would like to fix an issue I have on my website. I would like to have the safe bottom area the same color than the tab bar when scrolling, instead of the body background. What would you suggest me to do?
.header {
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 64px;
background-color: var(--black-3);
z-index: 9;
}
First screen
Second screen
Safari changing the tab/status bar color dynamically is a new feature of Safari 15. The release also adds support for the theme-color meta tag for customizing the color. From the release notes:
Added support for the theme-color meta tag to change the tab bar background and over-scroll area in macOS and iPadOS, and the status bar in iOS.
You have to put the <meta name="theme-color" content="#xxxxxx"> tag to your web page to use a specific color instead of the automatically picked one. Unfortunately this also means you can’t use your CSS variable for it but have to define the colour value in at least two places now.
Keep in mind that this also sets the top bar color for Chrome Android and the tab bar is at top in macOS and iPadOS Safari, so the effect may not be expected. The meta tag supports media queries in media attribute (see the release notes link) and changing the content attribute’s value using javascript should work as expected though (demonstrated in the Apple Developers video in references).
Note that content attribute accepts a CSS <color>. This means that the following is possible:
window.addEventListener("load", (event) => {
document.querySelector("meta[name=theme-color]").content =
window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
});
I don’t have a device with Safari 15 beta available to test with, but I suppose you could also add the element dynamically. It works with Chrome Android at least:
window.addEventListener("load", (event) => {
let meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
document.head.appendChild(meta);
});
Resources:
MDN: Standard metadata names: theme-color
CSS-Tricks: Meta Theme Color and Trickery
Apple Developers: Design for Safari 15 (theme-color is featured in the first part of the video. It also has information about using the safe area environment variables for content floating at bottom.
Edit: Added the javascript examples
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;
}
Does anyone know why this is happening?
I want both checkmarks to be white, but the :after element is black (however it seems to have a vertical white to black gradient).
It works in Chrome and Safari on a MacBook.
Open this example page in Safari on an iPhone to see the issue:
http://output.jsbin.com/lerudihiho/
(and here is the code: http://jsbin.com/ponamazoso/edit?html,css,output)
The fix here is similar to when you're using U+2714 in HTML: you need to add a U+FE0E VARIATION SELECTOR-15 directly after the check mark to tell iOS to draw it as an outline rather than a bitmap. Here's what this looks like in CSS:
body::after {
content: "\2714\fe0e";
color: red;
}
http://jsbin.com/fopiwaluwo/edit?html,css,js
http://output.jsbin.com/fopiwaluwo (full screen output - should be viewed on an iPad/iOS simulator.)
When scrolled to the bottom or top of the scrollable overlay the body also scrolls. I want to disable any scrolling on the body while scrolling on the overlay (white transparent area with copy).
This is a simplified example of the web app I wish to apply this to. I know that adding position: fixed to the body disables the scrolling however I can't use that in the real world example. JavaScript solutions welcome.
Cheers
Just add:
<script type="text/javascript">document.ontouchmove=function(event){ event.preventDefault(); }</script>
And behold, body does not scroll, but the overlay does :-)
Update: seems to work on iPhones running iOS 10 only.
Does not work on iPad or iOS 9.
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.