how to get a full page web app even in safari? - javascript

I'm building a full-page web app and it works beautifully in chrome, but in safari mobile it goes wonky. This is because safari mobile has the navigation bar on top and another bar on the bottom. How can I make my page account for them? I've been researching this for weeks and have tried every suggestion. I'm hoping someone here can help.
How do you get the height with and without the top and bottom bars? In truth, I don't really want either bar, but as far as I know there isn't a way to get rid of them except for the user to add the app to their home screen. If my user doesn't have it added to their front page yet, I have to account for the height of the bars. The reason I have to account for them is my page has a map, which must have a fixed height in order to show, it can't be flex. I also have buttons and user controls on both the top and the bottom of the screen, which must always be visible.
What is happening now is that sometimes the content jumps UNDER the navigation bar and therefore those controls become unusable.
I want to set the page height to be the height BETWEEN the nav bar, and status bar, if they are showing, the AVAILABLE screen height. Looking for either a css or javascript solution.
Can anybody help?
Testing with ios 11.2.6.

This whole thing absolutely stinks. I don't really have a solution - don't think anyone does - but here's what I know about it.
CSS 100vh is the maximum height Safari's viewport can be, i.e. with bars hidden. So if the bars are showing, it's too big and things might go under the bars like you're seeing.
CSS position: fixed; top: 0; bottom: 0 fits to the current size of the viewport without bars and will change when the bars show and hide, so it's a lot more useful. But you can't make everything position: fixed.
window.innerHeight is the same as 100vh so that's not much good.
So the only way I know to get the correct height from JS is to make a position: fixed; top: 0; bottom: 0 element and measure it. Then you can apply that height back to other elements to make them fit on the screen, oh, but the height will change when the bars show or hide. Heck.
Sometimes it's best to go nuclear and put the whole site in a position:fixed div, and overflow: hidden on the body, so that the document never scrolls and the bars never hide.
If the body is overflow: hidden, document.documentElement.clientHeight also gets the height without bars.
The boys at Safari HQ say this is all by design and they intend to keep it this way, and Chrome will be implementing it soon too. What a mess.

Related

How come the nav bar on stackoverflow.com jumps when clicked?

Nice new nav bar on stackoverflow. Looks like the bootstrap I am using. It has the same problem that my site does, the nav bar jumps slightly when clicked.
Any ideas how to fix it? I haven't looked too close, but I'm thinking there should be some sort of javascript fix to hold the screen until it repaints.
The reason why the navbar jumps is because at load time the browser calculates, based on the information it has about the content, that it won't need a scrollbar. Therefore it starts rendering using full viewport width. For a quick flash, until enough of the page has loaded to make the browser paint the scrollbar, the navbar is full-width.
That means, in desktop browsers, it is 17px wider than on pages with scrollbar.
Note: Before trying to fix this, please note it's only an issue on wide, pointer based devices. It doesn't exist on mobile/touch devices. Any method from below should be limited, using media queries or device detection, to desktop, pointer based devices.
A few methods on dealing with this:
give certain elements min-height property so that the browser will estimate the initial height of the page correctly (or at least more accurate).
give <body> a min-height of calc(100vh + 1px) on pages you are certain will have a scrollbar.
use overflow:scroll on <body> on pages that you know know will have scrollbar (always wrap this in a media query)
hide (as in: opacity:0) all above the fold content and fade it in when a particular element has loaded (typically used on window load event, but you could just use a particular HTML element for this, if the page is very long and you don't care about the bottom parts to be loaded when you paint the top) - this technique is widely used by AngularJs websites/apps, principle from ng-cloak directive, but with opacity. Effective at removing FOUC and this desktop scrollbar jump issue.
use a scrollbar plugin, removing the default scrollbar. Custom scrollbars are usually positioned absolute, over the content and don't influence content rendering.
(this is more of a hack, but I use it):
#media (min-width: $md-min) { /* 768px ? */
#navbar { /* assuming this is navbar */
position:absolute;
left: 0; top: 0; /* depends on layout */
min-width: 100vw;
}
body {
margin-top: 60px; /* navbar height #desktop */
overflow-x: hidden;
}
}
Note: This issue is also known as the modal overlay navigation bug, because when modals give body position:fixed in order to place the overlay, the navigation jumps to full width (as the body no longer has a scrollbar). It's a long discussion, with various fixes. example.
From my point of view, this is a fault of desktop browser developers.
Sidebar should never, ever, interfere with window width calculation. You either paint it over the content (only when the user scrolls?) or you paint it aside from the page in a manner that still looks good when you don't have a scrollbar.
It's not that hard.

Web Page Scroll To Right Side, Width Extending Infinitely

Got a strange layout problem on my website. This only occurred on PC, but not on mobile devices, due to I have the "viewport" scale=1 set up.
I have disabled X scroll bar, so the x scroll bar's hidden.
However, when i put the mouse at the right edge of the page, press down, then scroll to right side, it will keep scrolling Infinitely.
This is the website.
Really appreciate for your help.
the problem is you have put left: -999px; width: 999em; on most of :before element with position absolute and you did not define their relative try to remove all of them or define their relative your problem might be solved

Scrollable subcontent that doesn't change the height of the entire site

So I've been lately working on a project of mine that I'd really like to finish, not only Photoshop wise but also HTML/CSS wise and I've encountered a problem.
This is the website & some help graphics - I would like to make the content inside the white rectangle scrollable, but everything outside the rectangle should stay exactly as it is. I'm going to either use Skrollr or Parallax Scrolling, but I first need to figure out how to make it so the entire website has a fixed height and never stretches, while the subcontent div can be scrolled down and up.
Overflow: auto; does this for you, in a heartbeat.

Overflow and resize issue

I have an issue with my web page.
Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.
Edit: The container div has the overflow: auto property.
The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it's taken to a laptop, the last 1-2 rows become 'hidden' due to html overflow.
If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.
Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?
The easiest and probably the fastest way to do it would be using Javascript.
If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.
When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:
function resizeMain()
{
$('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}
// size it on load:
$(function(){
resizeMain();
}
// and size it on resize
$(window).resize(resizeMain);
Of course, many ways to optimize this, but that's the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.
Finally, you need Overflow: auto; on our tabular box
in the div that is height:90% put overflow: auto or overflow: scroll. That'll add a scroll bar to that div only.

Stop scrollbar from pushing content left

I'm designing a website and I have multiple pages that use the same template, some pages are longer than the browser window's height, other's aren't. The ones that are longer get pushed to he left by about 10px, this might no sound like much but it's noticeable when switching pages as everything jumps sideways.
Is there some CSS thing I can do to make the scroll bar on each page appear over the content rather than pushing it, I have a margin in the template so if the browser window is too small it will just cover the margin when the user scrolls to the far right.
The only way to do this is to have the scrollbar always visible.
html { overflow-y: scroll; }
Give overflow value as overlay. This will avoid the recalculation of layout when scrollbar appears
Overflow: overlay worked for me. Would've commented on jintoppy's post but I'm a nooob

Categories