iOS 15 beta 6 tab bar issue - ios

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

Related

Safari on mobile - computed style is different than given

I am writing an Angular (v.9) web application which contains few tiles on the scrolling panel. When given option is out of order I set blurred grey background with text on it. It works fine on desktop chrome/firefox/edge and mobile chrome/firefox. However when I test it on iOS with Safari text becomes too large for the tile. Even though I set font-size property on the "p" element itself:
<p style="font-size: 14px">
sometimes computed style says 21px.
As you can see, I marked that with red rectangles. Moreover, the issue does not appear on all tiles - as you can see blue one looks fine - font size is 14px. Unfortunately the presence of the issue on the particular tile seems to be totally random.
I use BrowserStack for testing, problem appears only on all iPhones (checked 8, 10, 11, 12) with Safari. Running Chrome does not produce issue.
It is not possible to expand "font-size" tree so I have no idea where that value come from, I haven't set 21px anywhere.
Do you have any ideas how can I force Safari to use given font-size? I've already tried multiple tricks like using !important, changing size based on some properties or even set different font size on click - works on all browsers but Safari.
Try this (only for iPhones)
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
and also make sure your code has the correct device meta tag
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
This is the mixin that I use for the Safari browsers
#mixin safari-only {
#supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
#content;
}
}
You can use that in your .scss file as follows:
#include safari-only() {
// your CSS
}

Ionic tab bar overlaps home button (iPhone X - iOS 11)

With iOS 11 and iPhone X Apple specified every app should live in a "safe area" (due to the virtual home button):
Inset essential content to prevent clipping. [...] For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.
The problem is a Ionic app (v. 1) with tab bar cover this part of the screen, therefore the bar is under the home button:
Does anyone know how to fix it?
(please note: if you run a new Ionic app v1 inside iPhone X simulator you will get two black spaces, at the top and bottom of the window, but you can prevent this adding "viewport-fit=cover" to your meta tag inside index.html)
For an Ionic 4 project, this would be:
app.scss
body {
margin-top: env(safe-area-inset-top);
margin-top: constant(safe-area-inset-top);
}
ion-tab-bar {
margin-bottom: env(safe-area-inset-bottom);
}
env is for more recent iOS11 versions, and constant is for older ones.
You should be able to apply the same principle outlined in this answer to the Ionic v1 footer, i.e.
.bar-footer {
margin-bottom: constant(safe-area-inset-bottom);
}
(or something similar - I haven't tested this)
For an Ionic1 project, I found that targeting the tab-nav did the trick.
.tab-nav {
margin-bottom: constant(safe-area-inset-bottom);
}
You can add a constraint to your custom tabBar main view to connect it to the bottom safeAreaLayoutGuide.
yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

Web page not getting 100% height in Twitter app on iOS 8

OS: iOS 8.1.1
Browser: Safari
Phone: iPhone 5C
We have a web page which takes 100% height and width. We have locked down the viewport so that the user can not scroll the page vertically or horizontally. This page is shared on Twitter via Safari web browser. When we view the the web page in the twitter app the bottom part of the page gets cut off. We are not able to view the page in its entirety. Even if we change the orientation multiple times still the cut off part is not visible.
The height of the part which is getting cut off is equal to the height of the twitter app container’s header (the part which has cross button, page title/url and share link) and the status bar (the part which has network status icon, time, battery level etc)
Note: This behavior is observed in iOS 8 only.
This has also been driving me crazy for the past several hours. The solution is to not use px or percentage based heights/widths but rather use position:fixed on your html and body elements, then setting top, left, right, bottom to 0. So your code will looks like this:
html, body{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
This forces the content to only be as wide and as tall as the viewport presented in twitters webview component without overflowing. Any code inside the body can now be 100% in either direction without fear of being hidden. This bug was affecting iOS9 as well. Confirmed the fix is working on iOS9.1 with latest Twitter app on ip6/6+, ip5, and ip4.
For anyone else coming across this, the fix I ended up using was
window.addEventListener("resize", function(){
onResize();
});
function onResize(){
document.querySelector("html").style.height = window.innerHeight + "px"
};
onResize();
this seems to work in the latest version of twitter's browser on safari.

List of known "Safari on iPad" differences over "Desktop Safari"

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.

jquery ui dialog + Google Maps + IE8 error... What could it be?

I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.
I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.
In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed
It's very confusing... Has anyone gone through this issue??
Thanks!
The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).
Any component that requires some
dimensional computation for its
initialization won't work in a hidden
tab, because the tab panel itself is
hidden via display: none so that any
elements inside won't report their
actual width and height (0 in most
browsers).
There's an easy workaround. Use the
off-left technique for hiding inactive
tab panels. E.g. in your style sheet
replace the rule for the class
selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize
the map once the tab is displayed like
this:
$('#example').bind('tabsshow',
function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps'
checkResize() on the particular map.

Resources