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.
Related
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"]?
i have a full screen layer for mobile devices and use these css lines:
#buttons{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: yellow;
z-index: 99999;
}
Whenever I scroll the page, the fixed layer slightly moves on top until it disappears completely. Any idea how to prevent this? Thanks very much!
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 have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
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).