Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on the edges. It’s not much of a trick to remove it though, a background-color on the body will do. Or, expand the website the whole area (notch be damned), you can add viewport-fit=cover to your meta viewport tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Then it’s on you to account for any overlapping that normally would have been handled by the safe area. There is some new CSS that helps you accommodate for that. Stephen Radford documents:
In order to handle any adjustment that may be required iOS 11’s version of Safari includes some constants that can be used when
viewport-fit=coveris being used.
safe-area-inset-topsafe-area-inset-rightsafe-area-inset-leftsafe-area-inset-bottomThis can be added to
margin,padding, or absolute position values such atoporleft.I added the following to the main container on the website.
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
(Update: when the iPhone X first came out, it used constant() instead of env(), but as of 11.2, constant() has been removed in favor of the standardized env()).
There is another awkward situation with the notch, the safe area, and fixed positioning. Darryl Pogue reports:
Where iOS 11 differs from earlier versions is that the webview content now respects the safe areas. This means that if you have a header bar that is a fixed position element with top: 0, it will initially render 20px below the top of the screen: aligned to the bottom of the status bar. As you scroll down, it will move up behind the status bar. As you scroll up, it will again fall down below the status bar (leaving an awkward gap where content shows through in the 20px gap).
You can see just how bad it is in this video clip:
Fortunately also an easy fix, as the viewport-fit=cover addition to the meta viewport tag fixes it.
If you’re going to cover that viewport, it’s likely you’ll have to get a little clever to avoid hidden content!
I think I’ve fixed the notch issue in landscape 🍾 #iphoneX pic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) September 13, 2017
This seems like a really poor design move on Apple’s part. I really want to encourage developers to just leave the white bars, and let users just think “wow, this phone isn’t very good for browsing web content.” We shouldn’t have to be making these sort of browser-specific “fixes” (oh, let’s just call it what it really is… a “hack”).
Do any others share this point of view?
I totally agree. Even worse, it’s not a “browser-specific fix” (like we were back to the IE6 era…) it is a single browser on a single device specific fix. Ugh.
Agree 100%
History has shown that Apple is pretty incapable of smart design moves when Jobs isn’t around.
Agreed. We’re looking at another Internet Explorer here.
I certainly second your thoughts. Adding a few lines of vendor specific code to handle the iPhone X specifically feels wrong.
You are right, I totally share!
Unfortunately some large companies will add clever fixes and users will see the white bars exist only on some website and will assume it’s the website’s fault.
I agree 100%.
1 like for you :))
I totally agree with you, adding proprietary variable is a bad move from Apple.
We still have to handle some prefix vendor, and they came from nowhere with those values.
I agree. That notch is totally ridiculous. They should have just made the whole top part a black bar like the Samsung S8 (which by the way has a better screen-to-body ratio)
I do!
The trouble is, users never blame the device if they’re happy with it. In my experience, users always blame the site. Oh, you’re using IE9 and this modern, standards-compliant site doesn’t look good? Must be the site.
You could have made a nearly identical argument about the viewport meta tag back in 2007.
To be fair to Apple,
viewport-fitis part of an existing standard specifically around handling non-rectangular screens. They used it as intended here.As for the new CSS constants, those have been submitted to the CSS Working Group for standardization. (Original proposal, Pull request for
constant(), Pull request for safe area variables)Agree!! Seems like a backwards move.
I agree totally. I don’t see why bad design on Apple’s part should dictate design. When advancements are made in devices, usually the web adapts to embrace it (responsive design to meet plethora of aspects, better design rules for high resolution small screens, etc, etc).
But adapting to bad design in order to compensate, while at times necessary, seems a step backwards. As you said, people need to look at it and think about how it’s a step backwards.
Or just accept that they bought a device that has a line in the screen.
Either way, it’s not our job to take up the slack.
@Peter nobody of us want to support the IE(=Issue explorer) but we have to in order to cover user base who still use IE. Similarly for iPhone we have to provide support. Sad part is; its awkward design will not last longer but we have to design & develop for this device for years.
I believe that our future client’s browser windows are not only always going to be rectangular. New screen technology allows for screens that are irregular in their shapes and therefore I believe that this is beyond Apple. The change is coming and we developers have to embrace it. The viewport-fit=cover seems like a good way to solve this IMO.
Odd shaped screens are not guaranteed to require custom programming. That is why this sucks. Those elements bumping in and out on scroll? Sucks, is ugly and horrible for users, our audience.
And to have to custom code around every possible device screen’s possible differences in shape based on orientation? Bah, you are wasting your time and money or your employers or your clients’.
Consider how our code will look if there are 300 different screen types we have to code for?
Generically speaking there are already are odd screens, and again, in the next couple years we will see how wide spread that gets. But just because Apple did it, I am in no way going to jump on this right away. I’ve seen this happen repeatedly for years.
And finally when Apple is “brave” enough to go back to a rectangular viewport, everyone will say how awesome they are all over again. Cause there’s no way anyone will figure out how to have a camera see through a screen without a notch, right? (ha, I have a couple ideas already)
I predict no notch front facing cameras and sensors. :P And this tech is from a year ago. (I saw clear screens 10 years ago)
http://www.dailymail.co.uk/sciencetech/article-3822108/Panasonic-reveals-invisible-TV-Prototype-OLED-screen-turns-transparent-glass-not-use.html
To be honest: as web developers it is our job to be creative in finding solutions for strange behaviors of software and hardware and delivering the best experience to ALL users.
Recommending just ignoring a device that is clearly different and difficult to adopt to, but may get a huge market soon is a poor decision. Reminds me of people (mostly blackberry users) that thought a phone without physical buttons is rubbish. See where you get when ignoring things because you have to change?
Of course it means work, of course you’re most likely not getting paid for this, but maybe we will have to implement this for various devices following apple soon and it may develop a standard soon having issues like this.
Not me.
Apple is using the CSS standards as intended; perhaps you should read their blog post before you decide it’s a hack: Designing Websites for iPhone X.
Here’s the code:
Along with the
viewport=fitin<meta>, this is no big deal. Although Apple is implementing it this way, this is a CSS standard.The only issue is that W3C renamed
constanttoenv; by the time the iPhone X actually ships (early November), we’ll be using that instead.Compared to all the shenanigans we have done to support IE, this is a walk in the park.
Old browsers will skip the
@supportsand newer ones will automagically do the right thing. The iPhone won’t be the only device to take advantage of CSS Round Display Level 1.We’re supposed to be about mobile first and future-friendly right?
Welcome to the future. ;-)
@Max
Instead of debating our opinions and experiences, which will vary. I propose a real world example of the abysmal failure of the notch in the screen, and the supposed idea of supporting multiple “shaped” screen types.
https://www.essential.com/
vs
https://www.apple.com/iphone-x/
What is the dimensions of the notch on either one? Where is it located? Does the device pass on the location of the notch to the browser and CSS?
From what I have read, Apple doesn’t tell software anything about the notch. Only that there is a generic thing called “safe space”. Which to me, means a standard rectangular view.
Fastforward 5 years with 100 different screen types and sizes, multiple versions of Apple’s own devices with different notch sizes, and in your code, you can’t tell which screen you are displaying on or what size the notch is. Or even which side (potentially) the notch is even located.
Is notch even a notch? What if it’s a slant, or a curve, then what?
If apple is going to force us to deal with this odd shape, we’d better get a hell of lot more than just “safe area” meta tag.
Interesting to see that on apple’s homepage there is currently the white bars showing https://ibb.co/iejBg5
So, if one doesn’t want to mess with viewport-fit=cover, would this handle the title bar issue?
Of course, if you want padding at the top, you might need calc() as well.
Unfortunately not. If you don’t use
viewport-fit=cover, then the top of the webview (as far as CSS is concerned) is actually below the notch. Moving things off the screen won’t end up moving them behind the notch.I’ll just mention that if you’re building a website and it’s going to run in Safari, you shouldn’t have any issues with
position: fixedelements because the Safari address bar UI will automatically deal with the notch at the top. My blog post was approaching it more from the perspective of Cordova/Phonegap/Ionic/Meteor apps which use a full-screen website and will need to deal with the notch.@Darryl Pogue
Position fixed is now broken in iOS 11. In landscape at least it works differently to iOS 10 and before and now the content goes behind the address bar on smaller devices like the iPhone 5
I absolutely refuse to support one screen type on one device. This thing is dead in the water. Why? Because there is another phone that has a notch, and it’s not the same friggin size.
I learned my lesson by targeting ipad screens then found the samsung tablet was just a little different, but the ipad styles just didn’t work on it.
Fool me once.
Now, if a “large” portion of devices gets this kind of thing, then it will be time to worry about this. If you have a massive team of devs just looking for extra work, have fun. Style your notch.
You are right, we already have a lot of things to worry about, imagine if all the brands have weird screens shapes and proportions. The Iphone browser should compensate that.
looks awful mate.
You should have some pictures in this article, it really makes little sense to me. Don’t all phones have a top area for camera etc, why is it so much more awkward on the iPhone X? And white bars on the edge, aren’t they normally referred to as margins, essential for easier reading of the page?
Thanks to the inclusion of Vojtas Twitter post with his picture, things got a bit more understandable.
Not all phones have the screen extend past the sensors. In fact, most dont, with a few exceptions, but those exceptions arent very popular.
This Japanese article has the best visual diagrams for showing and understanding the safe area concept
Thanks! This has given me some ideas to try out on our site on the new iPhone.
That seems like such a clunky fix to this “problem” — why can’t Apple (or probably Safari / Chrome) add a padding to the browser so the edge of the browser is outside of the notch?
Why is it up to every developer to adjust for this browser quirk? Reminds me of the IE6 days again
I don’t have the figures to back my claim, but I feel most web browsing on phones is done in portrait mode, and only turned landscape to increase legibility of certain paragraphs. I feel going the extra mile to accommodate this minor use case and running the risk of making it unlegible if not tested entirely, is not worthwhile.
Not to take away from the article, undoubtedly this information will be useful for some.
Well, this problem will still occur in portrait view, they’ll just be on the top and bottom.
A bigger question to ask is who the hell looks at a webpage in landscape mode on their phone?
I was thinking the same thing Nathan. I couldn’t tell you the last time I browsed horizontally on my phone. It’s just not great practice since you can’t see much. And if a web designer/developer is making their site responsive it will look way better if the phone is held vertically.
hahaha was thinking the same thing :) But still, it should be addressed.
Can’t hate this more…
It once again trust to put a line in the sand .. of you here and them there.
The more the same is the experience the better for compliance all users at the same site . The one thing that is the same is the browser. Why can’t we just agree to be agreed.
If I was political I’d say it’s a move to seperate the users just like the far right do in real life..
TBH I never go to landscape for browsing websites. Except when there is video which will be full screen anyway.
I’m looking forward to having to focus my time on trying to render for particular screen shapes rather than focusing on the experience for my users.
Watch this space for the iEllipse, the phone with an elliptical screen. Make sure nothing important renders anywhere but within the centre 25% of the screen.
Followed by the Galaxy Donut 9. Where the screen has a hole in the middle for you to place your drink. Make sure your website renders around a rounded edge rectangle (It’s not quite a circle).
Either that, or manufacturers might think they should be trying to work to accepted standards or make solutions themselves instead of pushing the solutions to developers to pick up the slack.
https://www.xkcd.com/1889/
Sometimes the best comments on xkcd.com are in the title attribute of the images. Anyone know how to access them in a mobile browser? Makes me a little sad when on my phone and I see a link to xkcd, cause I know I will be missing something. :(
Here’s the title attribute value from the above link.
hyark.
Chrome for Android, If you click and hold the image the alt text usually appears with the context menu.
Aside from that, change the address fr www. to m. and clicking the image brings up the alt text in another div.
Not the best design by Apple but I can’t remember the last time I have browsed the web in landscape mode.
I will definitely stay away from any CSS hacks to cater for this new iPhone.
This whole notch things is dumb. Apple charge the earth for their devices and they can’t even design a better device. They were so determined to make a whole screen faced phone that they though F designers and developers. Why not just have a camera that pops out the top of the phone when you have to take your selfies?
Because they’re not designing a 1980’s childrens spy phone toy..
It is not our problem if Apple has decided to ruin mobile view for sites. This is their problem and not something we should even try to fix. This should be fixed on our part only if more than 2% of total site visitors are browsing from iPhone X. As we know, that is highly unlikely to happen. Ever.
Exactly. Why should we jump through hoops just because they are too ivory tower to make realistic design decisions? If the phone doesn’t display content well, it’s the phone’s (and Apple’s) fault, not ours.
Here’s a suggestion on how to handle it: do nothing. A company made a dumb design decision and wants the rest of the world to pay for it? When was the last time you praised a browser manufacturer for proprietary rubbish like this and they got away with it. If Internet Explorer had demanded this stupidity everyone would be throwing their toys, so why not with this too.
I agree completely – if we keep catering to their poor decisions then they’ll keep getting away with it. If (and I know this is a bit of a wild dream) the world just outright refused to cater to the notch, then maybe Apple and others will notice, and bear it in mind in future.
This is a really impressive bit of nonsense.
Apple is making disastrously poor design decisions from their ivory tower. As a lifelong Apple user I can’t help looking across the water and noticing that Samsung is pushing the envelope in beautiful, iconic ways while Apple is tooting their own horn and pumping out garbage.
I refuse to design around this hardware flaw.
Sorry Apple. Next time don’t be so idiotic and full of yourselves.
I’m seriously considering making the switch to (shudder) Android.
Don’t be afraid of Android. I have recently bought Huawei P10 Lite and that phone beats iPhone in so many ways. Craftsmanship, performance, storage, batery, sound, screen… Even fingerprint sensor is better and faster.
Without Steve Jobs, Apple is living of their old fame. If you remember Apple history, at the time Steve Jobs wasn’t there as CEO and while he was engaged with Pixar and Next computers, they made same mistakes as they are making now – many different models/products and inconsistent design.
bad, bad, bad design!
This reminds me of when we – web developers – tried to suppress one pixel chrome borders on Android browsers. We were hacking an Android problem and it was totally useless in the end because it was an Android problem and not a HTML / CSS problem. Work we should have never bothered to do.
There is a great article by Jens Meiert that explains why we should not do stuff like this: https://meiert.com/en/blog/staying-clear-of-user-agents/
On the other hand I’m not sure if this is a similar problem. I only learn about it now.
I say the developer community just needs to put its collective foot down and say “screw that” and refuse to support design that accommodates this level of BS.
Who does this $h!# from a product design standpoint and says, “Yeah, that’l do just fine let’s just create a hack only for this device”? Oh, yeah f’n Apple!!
Couldn’t agree more with nearly all the comments on this saying it’s a bad thing to support this with custom code (I don’t mind setting a body bg – this should be done anyway) but anything more to cater to a single browser on a single device is something web designers should avoid like the plague.
I would like to see UI developers begin putting important elements INTO the “notch” zone, rather than avoiding it. Maybe a banner for a special deal that only us plebs can see because we can’t afford an iPhone X. Or maybe a special menu. I could see some creative uses for the notch and a “rich snob mask.”
That would be a much nicer use of the area.
But you’d have to ensure that what you’re putting there either isn’t important enough to show on other devices, or that it isn’t “out of place” enough to make it look weird on other devices.
Vojta’s fix looks to be specific only to the extremely simple content in his example; I have doubts that such a fix would play nicely with most layout elements.
Would Steve Jobs have allowed this level of standards-defiance? What, exactly, is the notch’s benefit to users? A few more pixels’ worth of viewport?
Forcing developers to build complex, hacky workarounds for the sole purpose of satisfying oddball display quirks inherent to a single browser on a single device is not what I consider innovation. Not that we haven’t seen this before, but wow, we’re seeing it again in 2017, with an Apple flagship device?
The upside for developers is that site owners will want or demand their sites comply with the new device, which means hours of billable to implement workarounds.
This is an amusing take on the old “it’s a feature not a bug” meme.
To hell with it. Just leave the sites as they are. Smart users will blame the phone. Less-smart users will keep buying Apple products.
I refuse to support terrible device design.
Is it weird that Apple would design a phone this way? Yes and no. Either way, I still have to build websites. I will have to design around this bump in the road. But that’s the life of a web developer. Designing for things that don’t make sense.
I appreciate this article and the heads up. I will add this to my list of “hacks” :)
I think even more of a problem with this is testing it. Chrome likely won’t add the new design to Inspector and not many people use tools like Browserstack, so unless you actually own the X, it’ll just be a matter of guessing and hoping it works.
If you have a Mac, you can test in the iPhone Simulator, which is part of Xcode 9, a free download; if you have an Apple developer account, you can download Xcode 9 now: https://developer.apple.com/xcode/
So in order to develop an iOS app you need a Mac, and know if you want a web site/app to look good on the iPhone X, you need a Mac as well!!! That is BS!!
Why dont apple use the actual “mobile web app status bar style” to change this white-bars and its done? Like this:
<!-- Chrome, Firefox OS and Opera --><meta name="theme-color" content="#ff0000">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ff0000">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ff0000">
In most applications of it that I’ve seen, they use a different colour for the status bar than the background. So you would still end up with different coloured bars down the side of the screen (although they would hopefully match your colour palette better than white)
I don’t know why so much hate?
I think this statement from @grorg makes it very clear:
I think you are framing this a bit extremely by implying there’s hate involved. Anger and disgust? Maybe, or most likely irritation and annoyance.
I think the answer is simple, hubris on the part of Apple. They seem to behave in a way that gives the impression that whatever choices they make in their designs are “good”. Remember the “courageous” claim for removing the headphone port? (I hope you didn’t buy that outright deception) You don’t think that will affect every other phone and user out there to some degree?
What would Apple’s iPhone be without any apps? The browser being one of them, of which most readers on this site are developers for. Yet, we care about an open ecosystem. Maybe you are not old enough to remember the horrendous burden put on us over the years to support terrible decisions by other companies like Microsoft. We are not willing to go through that again. Ever. Especially now that we have history to show us very clearly the way we should go, and what we should avoid.
And here comes Apple, introducing a brand new cruft of mess. The comment you link to is enlightening. But don’t you wonder why that comment was needed in the first place? And why was that not clarified openly by Apple from the get go? Why is it hidden halfway down a comments page on one post on github???
Sorry if this is asked and answered. What support will
constant(),var()andviewport-fit=coverbe like in mobile browsers other that Safari?constant()—which has been renamed toenv()—will be implemented as various browsers rollout support for CSS Values and Units Module Level 4.@viewport-fitis already part of CSS Round Display Level 1 so it’s a matter of other browsers implementing itSince Safari is the only browser than can run natively on iOS, other mobile browsers are a none-issue. Firefox and Chrome for iOS use WebKit under the hood, so they already support the new stuff.
I suspect Chrome for Android will add support if or when Google ships a device that could benefit from them.
When did Apple begin using IE specs??
Really poor design by Apple – thats a do-over
I decided to disregard the debate around whether or not the “notch” is a good hardware design, whether or not we should be “forced” to support the iPhone X, or whether or not “anyone” browses in landscape mode on their phones.
For me, the real decision came from browsing my sites in the iPhone X simulator in Xcode and seeing what they looked like in landscape mode without any intervention from me, with the default “safe area” gutters on each side. I wasn’t happy with how they looked. At all.
So, I implemented Apple’s suggested fix. It was trivial to add this to my sites’ responsive CSS — from beginning to end, it probably took a couple hours to update my templates and CSS, then tweak everything until it looked how I wanted it to. Honestly, the only painful bit was having to test in Simulator instead of on a real device.
For me, the bottom line is implementing this change will result in a better experience for my websites’ visitors.