In iOS 15, Safari changes the behavior of the address bar. It floats somewhere near the bottom of the page.
This can greatly affect the design and user experience of the page.
Are there indicators to detect the address bar, know when it’s present and know its location?
Pad your webpage at the bottom using the environment variable safe-area-inset-bottom like so:
body {
padding-bottom: env(safe-area-inset-bottom);
}
This session by Jen Simmons goes over how to deal with Safari's new address bar: https://developer.apple.com/videos/play/wwdc2021/10029/ (see from 16:44 min)
The floating tab bar is considered to be beyond the lower edge of the Safe Area. You can get the Safe Area’s inset from the viewport’s bottom in CSS using env(safe-area-inset-bottom).
More about supporting the Safe Area in WebKit: https://webkit.org/blog/7929/designing-websites-for-iphone-x
The behavior for this is changing a lot. I recommend adding a DIV like this to your page to play around:
<div style="background: red; color: white; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)">Hello!</div>
This will give you the word Hello! in a tight red box with the
four safe margins applied. You'll see these margins wherever on the page this div is - you don't need to make it a footer or header. It's a very good aid to visualize what's going on.
As of Safari 15 current beta there is :
No longer a floating address bar.
No longer any value set for env(safe-area-inset-bottom) to avoid interfering with the bottom address bar.
env(safe-area-inset-bottom) is set for the purpose of avoiding the home screen indicator bar.
Setting 100vh for the height of your page will prevent the address bar appearing at all unless somebody clicks on the site name at the bottom of the screen.
However, with 100vh it's possible for items to hide underneath the bottom bar at this time. I'm really hoping they'll fix this behavior to set the safe area.
So for the red box to actually appear to have any padding you must:
Switch to 'Single Tab mode' (address bar at top) in Safari settings.
Scroll the page up and down to make the address bar show and hide.
Notice the box will have bottom padding only when the home screen indicator is visible (the white bar at the bottom of the screen).
You can use ObserveResize and Css for solve attaching absolute dom element on the bottom of your screen.
There is the sample: JavaScript es6 + css solution
A different solution to this issue (that works with 100vh) that I've had success with is:
min-height: 100vh;
min-height: -webkit-fill-available;
So far you can't really detect the size of the address bar because the env(...) inset variable was cut in the final release. But! The address bar does affect positioning on the page.
I'm not exactly sure how it determines what elements to move, but page elements can react to it. For example, take a look at Twitter's navigation bar when viewing twitter.com on a mobile device.
If you want similar behaviour ⤵︎
Make a div with fixed positioning
Set it's bottom to 0
Be careful about setting height of the fixed div to 100vh as I think this squeezes it out of the address bar's reactive area.
Please, anyone, post comments and updates about this issue as it's changing frequently.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I'm building a webpage for a client that I inherited from another developer. The link is: http://up8.431.myftpupload.com/. The client would like the phone number and the social icons in the top bar to display in the same style across all devices:desktop, tablet, and mobile. She doesn't like how when the display gets small enough the phone number and social icons stack on top of each other. That's fine but if there's no room to display them left and right but if there is, she would like to keep the same style. Problem is, I can't figure out how to make that happen.
Upon inspecting the element, I notice that each block has a width of auto, or whatever it needs to fit in. I've tried giving each block a display:inline rule in the hopes that they would take on the content width and align left to right and then I can just float the social icons to the right.
Tried something like this:
#top-bar-content, #top-bar-social
{
display:inline;
}
AND
.top-bar-left, #top-bar-right
{
display:inline;
}
What I hoped would happen is both blocks would display inline, back to back and I could just float them left and right respectively. What actually happened is the phone numbers changed its width to fit the content and floated itself to the left exactly how i wanted it to. The social block however, did not. It lost its dimensions; upon inspecting the element I find its width and height are 0x0. It remained in the same spot. Like I said, in my head I expected it to adopt its content width and sit right next to the phone number.
I'm sure this is just a noob error and I'm just not seeing what's in front of me. I really appreciate any help in advance.
I would change the parent div that contains both the number and social icons to display:flex. Then add justify-content:space-evenly or space-around or space-between (experiment between them) to the same parent element.
So you will have to use a media query to apply this for mobile devices only. When this is applied on desktop devices there is some interference from other classes and "::after" pesudo code.
#top-bar-inner {
position: relative;
display: flex;
justify-content: space-evenly;
}
This will do the trick
Ive been on multiple website where onload where the website is zoomed out to keep resolution and therefore stopping overlaps on the mobile page.
Im not sure i am explaing my question correctly. As i am a new member, i will add links to the differences.
I have tried some css3 media queries and some meta tags i have found online but nothing is working for me at the moment.
Here is the link to my site:
http://conorpendlebury.com/
As you can see from the image below there is overlapping with the navigation bar which pushes the content too far giving a squished appearance.
http://conorpendlebury.com/Images/Screenshot.png
Are you trying to make your #Sidebar to overlap your #MainContent and #Footer when activated while #Bio wont squish?
If so, make your #MainContent and #Footer with position: relative and z-index: -1 and remove whatever is making their marginLeft equals to document.getElementById('Sidebar').style.width while activated.
If you intended to make it squished, you need a function to recalculate and reapply css to #MainContent and #Footer.
To build a offcanvas navigation you set the page to translateX the size of the navigation. So the container keeps the width.
Here is a example.
It's possible to code this without JavaScript.
Is there a way to always show a scrollbar on an iframe in HTML5, even if the content is not overflowing? The scrolling="yes" attribute doesn't work in HTML5. Is there a way using CSS?
It seems that scrolling="yes" was supported by some early browsers only. Judging from simulation of older versions in IE 11, it seems that IE 8 dropped the support: although the attribute as such is recognized, the value yes is not—scroll bars are shown only when the content does not fit in.
This is a change in browser practices. It has nothing to do with HTML5. In fact, HTML5 describes the attribute scrolling="yes" as mapping to the CSS setting overflow: scroll, which is somewhat misleading.
Modern browsers implement iframe so that the scroll bars are present, if needed for accessing all of the content, but not otherwise. Using scrolling=no or overflow: hidden, you can prevent the scroll bars from appearing, but not make them appear if the content fits (there is no overflow).
To make scroll bars appear, you need to make the embedded document set them up, e.g. by using body { overflow: scroll } in it. Then it does not matter what the iframe element says. The scroll bars will be passive (and light grey), when the content actually fits, but they will be there are occupy space, and they turn to active scroll bars as the content expands so that it does not fit. In the following example, I am embedding a page that sets body { overflow: scroll } and has an editable body element, so that you can add lines and see how the bars change:
<iframe src="http://www.cs.tut.fi/~jkorpela/hello.html"></iframe>
Just as an add on, if you only want to have scrollbars showing in one direction and not both you can use the specific y and x css.
I wanted a vertical scrollbar showing all the time for the look of it but not the horizontal as width never changed.
So I used:
{overflow-y: scroll;}
The other one (in this case overflow-x) will default to auto and only show if needed.
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.