For the website that I am managing, I am handling the iPhone X family screen safe area using the new safe-area-inset-<position> and this is working fine on Safari browser as you can see here:
With the following code:
/* white container for the home bar that has an height only on devices that read the safe area to cover the transparency around that bar */
.ctc-container {
background: $white;
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: env(safe-area-inset-bottom);
z-index: 100;
}
/* chat and phone number container are positioned at the bottom of the safe area (for devices that read it) or at the bottom of the page */
.ctc-box {
position: absolute;
bottom: 0;
bottom: env(safe-area-inset-bottom);
}
Now the problem is on Chrome browser because apparently it is not handling the safe area yet, so the chat and phone number box is overlapped by the iPhone home bar.
Is there any CSS solution that can be applied for Chrome on iPhone X family devices to handle the safe area?
Have you added viewport-fit=cover to your meta[name="viewport"]?
Related
I have really bad situation. I have my custom div which I m showing under page. The only issue I have at moment that it's not working on iPad. The overlay covers the popup even after I have proper z-index to both element.
This issue only facing with iPad safari. On other browser it's working fine. I found one solution where I need to shift my popup next to or near by overlay div which is not possible for me due to binding context of knockout.js
The issue snap
here as you can see the attached image the opened calender is behind the overlay gray div.
Below is the html structure where the higlited is the calender container & at last overlay div.
Let me know if some can suggest me some good idea to deal with this.
It seems like if your fixed element is inside an other fixed element that has lower z-index than overlay it will stay behind it even if the element itself has a higher z-index. So you have to find that higher fixed element and change it's z-index to something higher.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 4;
}
.lower {
position: fixed;
z-index: 2
}
.popup {
position: fixed;
border: 1px solid black;
background: white;
height: 200px;
width: 200px;
z-index: 100;
}
<div class="lower">
<div class="popup"></div>
</div>
<div class="overlay"></div>
It's also happen for me in Safari, simply I solve it by remove overflow:hidden from parent div.
I made a website that looks exactly like it should on Firefox but unfortunately not on iOS (which uses Safari webkit) and chrome on some devices of the device. It just doesn't properly display the Menu-Bar (it should be position fixed). The problem here is, that I don't really know what the issue is.
Screenshots:
White space between address bar and photo should be the menu:
Here you see that you only see the menu when it's above the parent
I can't really figure out why it behaves like this, because according to various wikis position fixed is relative to the viewport and not it's parent "the viewport is always their containing block" ( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary )
*The CSS:
.main-navigation {
clear: both;
float: left;
width: 100%;
position: fixed;
width: 100vw;
height: 6rem;
background: -webkit-linear-gradient(top, #fff, #d6d6d6);
background: -moz-linear-gradient(top, #fff, #d6d6d6);
background: -ms-linear-gradient(top, #fff, #d6d6d6);
background: -o-linear-gradient(top, #fff, #d6d6d6);
top: 0;
right: 0;
z-index: 100;
overflow: visible;
}
nav {
display: block;
}
.home header.site-header {
top: 24rem;
left: 8rem;
position: absolute;
z-index: 3;
}
.home header.site-header is the parent of the menu
There are so many issues with :position: fixed; on mobile devices/with mobile browsers, that I don't even know where to start.
http://bradfrost.com/blog/mobile/fixed-position/
Check Brad Frost's article on the matter and you will see why this is not an easy task to accomplish.
What could help is Filament Group's fixed-sticky-fix:
https://github.com/filamentgroup/fixed-sticky
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).
I'm creating an iOS app with partially native code and partially html5. A splash screen followed by a webview, that's all for native code, the rest of the content are implemented by html5 and will be shown in the webview. In the webview, the page is divided to 3 parts, titlebar on the top, content in the middle and tabbar on the bottom. I want the titlebar and tabbar each stay in their position, that is the very top and the very bottom in the webview no matter how the user scrolls the page, the content is scrollable of course, now how can I achieve this? What I have so far is the following, but when keep scrolling until hit the very top/bottom there will be a white gap at the top of the titlebar or at the bottom of the tabbar, like most iOS app, how can I avoid this?
.mobile-titlebar {
height: 44px;
border-bottom: 1px solid #border-color;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.page-content {
padding-top: 44px;
padding-bottom: 49px; /* Height of the footer element */
}
.mobile-tabbar {
height: 49px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
I managed to figure it out by adding the following line in my iOS native code:
self.webview_main.scrollView.bounces = NO;
Hope this helps someone.
I am completely new to IOS development and I have developed an Asp.Net MVC 4 web application.
Now All I wan to do is I would like an app which shows my web site in full screen mode when opened in an IPhone hiding all the status bar, address bars and should ask a user to add the app to home screen when opened in an IPhone for the first time.
My Mobile Styles CSS
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
/*background-color:aliceblue;*/
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
/*background-color:aliceblue;*/
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
Is there any simple way I can do this?
To make a webapp go full screen in iOS, you just need to add the meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
But, bear in mind, that if you do this, you are telling iOS that this is actually a web application, not just a mobile-optimized website. You'll be responsible for all navigation (back button, etc.). Basically, your web app should look and function like a native app, just on the web.
As far as adding to home screen goes, you cannot do this programatically. The user must actually manually add to home screen using the UI in MobileSafari. If you just want to prompt them to do that, then all you're talking about is a bit of HTML, styled however you like with some message. Then, you can use the boolean window.navigator.standalone to test whether or not the user is running in web app mode (and thus has already added your app to the home screen) to decide whether to hide or show the message via JS.
Also, bear in mind from a styling perspective, that iOS reports device and viewport width based on a 1x scale. That is to say an iPhone with a retina display has 640 horizontal pixels, but will report 320.
Please follow below links settings, so that when ever you open it looks like native app instead of web browser app in iOS
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
If it answered , Please check right mark on left side to answered