On display - just under the cutout
Your web page *is* on display. In a locked filing cabinet, stuck in a disused lavatory, with a sign on the door saying "Beware of the Leopard".
WebKit, the open source project behind the rendering engine that powers Apple's Safari browser on macOS and iOS, has urged web designers to embrace "the notch," though not everyone is happy about doing so. Apple's forthcoming iPhone X has a notch because a portion at the top of its screen has been given over to what the tech …
where have we seen that before
Given that an entire website is required to explain what browser features are supported in different browsers and to what extent - it's clear that "what we have seen before" is to product designers what videos of extreme violence are to jihadists.
"the illuminated surface of the phone no longer forms a rectangle"
It's not just the notch. The corners of the rectangle are rounded (and probably not a very circular rounding for all I know) and presumably Apple will scream to the courts if anyone starts producing another phone the same shape, so the only safe approach for web devs is to work in the central rectangle and just ask for a background colour (or gradient, or clipped image) to fill out the rest of the space.
If *that* isn't done by default, then lots of web-sites are going to look a bit crap and Apple will deserve to get panned. If it is done by default, then I don't see a problem. You shouldn't be depending on a particular part of your background wash being behind a particular part of foreground content.
Not really important but quite a few Android phones have rounded corners on the display already, and the Essential Phone has rounded corners and a notch at the top (although a smaller notch than the iPhone X).
The corners might be rounded differently to the iPhone X, but they looks similar from a glance. You can also get apps on Android that will overlay rounded corners on older phones.
Why not just reserve the left/right area in the notch for status information and leave that there all the time? It wouldn't be useful for a web site to display "full screen" in that area anyway, so why account for it at all? The web page should be below it. Honestly I'd prefer not ever having a true "full screen" and always having the time displayed.
I can't see them having much luck getting web designers to account for that, at least not for a few years until Apple can get up to a quarter billion or so 'notched' phones in circulation and they're harder to ignore.
And when you turn it sideways?
Surely that's Apple's problem. The browser should just display in the useable part of the screen. The rest is pointless for websites. If the status info is useless on its side, then it should just default to black, and then the screen can look like it has a bigger bezel at the top - which is perfectly fine. If Apple don't like that, they should have done a better job of design, or not tried to pretend they could have a phone without a bezel, when the phone's got a bezel.
That problem has already been solved, or so it seems. I saw a video of an iPhone X watching a video. The guy turned it sideways and it showed the normal 16:9 (thus black screen on both sides since it is 18.5:9 or similar) but when he tapped to zoom it, it used the whole screen so the video was notched on one side. Which is fine, because if you are OK with losing some of your picture on the top and bottom due to the zoom, losing a little bit on one side due to the notch isn't likely to be an issue and at any rate zoom isn't the default.
Ideally when viewing a web page sideways it would not use the notch, but zooming it would allow doing so. Obviously you wouldn't want to if it was one of those annoying web sites with no margins that has content all the way across from left to right, but if the notch took away some margin - or better yet some of the ads - then it isn't a problem. If Apple convinces web site designers that having no left/right margin on mobile is SHITTY design, then even those who hate the notch will have to tip their hat to it (sort of like how Apple haters have to give them credit for making flash protocol non grata on the web)
"Horton insisted on Friday that today's site layouts will look fine on the iPhone X from the outset because content is automatically placed in a safe area where it won't be obscured by the sensor housing."
This is what the phone already does. By default web sites don't get the area covered by the notch. If you use the WebKit extension you can specify that you want the entire screen area to count and can find out which part of the display is actually display.
So I don't really understand the controversy.
"Why not just reserve the left/right area in the notch for status information and leave that there all the time?"
Yup, that'd be a pretty sensible idea. Which is almost certainly why it's not been done, since there doesn't appear to have been any input from UI/UX designers in the decision to put the horns there. May as well use them for something, since the alternative appears to be just leaving them blank permanently... which makes removing the bezel completely pointless.
When the page is being rendered on an iPhone X, the browser should by default render it to not include the notch and ears at all - so just use a smaller rectangle, or - and this would need to be a user choice, say a gesture or a setting - use the whole screen and behave as if the notch was just an opaque permanent region always lying on top of the browser window. Which it is.
Clever web designers could always look at the user agent and re-layout their creations accordingly as they do for mobile devices anyway. I don't see why this needs any special extensions to CSS and I don't get why these designers are whinging about it as they're going to have to get used to circular screens on smart watches and all sorts of non-standard shapes in due course. I guess it gives them something to talk about when oiling their beards and finessing their man buns.
The problem is that if designers follow current best practice, which in part derives from the kludge than Apple introduced with the I-Phone then the screen size will be incorrectly reported and this may lead to content being off-screen. In typical Apple-style they launch a device with a kludge and expect everyone to do what they want.
I suspect some kind of tweak to IOS Safari will allow users to toggle screen size to include the notch or not.
So why is it OK for Apple to introduce non standard codes into the browser but Microsoft was rightly panned for doing the same thing.
If you were replying to me, then I'm not saying it's ok at all; I'm saying that Apple needs to do absolutely nothing except, under user (not designer) control, change the reported the screen size to omit the area covered by the notch and ears. Everything would be fine, beards and man buns possibly excepted.
"If you were replying to me, then I'm not saying it's ok at all; I'm saying that Apple needs to do absolutely nothing except, under user (not designer) control, change the reported the screen size to omit the area covered by the notch and ears. Everything would be fine, beards and man buns possibly excepted."
No. Because then the site developer (it'll be the developer's problem, not the designer) to account for a user who doesn't know about that setting to come on the site with it hiding behind that crotch.
Safari, by default, should move the site below the crotch or to the side of it (if in landscape). That means the developers can ensure their site is displayed uniformly across all of the devices capable of rendering the site in a browser. It's 2017, it's over 10 years since developers last had to make massive concessions for IE6. It really shouldn't be happening again now.
Apple fluffed the design of the iPhone X so that it resulted in that horrible "horn" shape. But it's up to the web developers to fix the problem?
Get fucked Apple. I have no problem telling IE7/8 users to upgrade their browser don't think I'll be scared of telling any idiot owning an iPhone X the same.
This post has been deleted by its author
HTML was built to render pages and be device agnostic.
But now HTML is dying, long live device specific scripting that doesn't render on most devices because designers can't write for everything ... Hell, they can't even be arsed to script for landscape format so landscape viewers still have to scroll the damn page for ages ... like the page I'm typing into now, thanks El Reg ...
There's clearly an opportunity here for someone to come up with a service they can supply to app developers where ther developers get to use the "safe rectangle" and the two sections either side of the notch get used to serve ads with the developers getting a (probably derisory) cut of the ad revenue in return!
So Apples fantastic new innovation is to cut a weird hole in the screen and blame everyone else for not conforming - even to the point at which it wants to change CSS industry standards?
Yet Service Workers, a fantastic cross-browser (bar one, natch) innovation which dramatically boots offline web support might finally see an appearance in Safari after years of Apple shouting and dragging its feet?
To be honest, I find the idea of a non-convex screen rather silly. We'll see what kind of hash developers make out of it, but I suspect most will just ignore the left and right pads to simplify their lives. I mean, it is Apple, and the people buying those will be rich, but there is a limit to how much money you can get out of people by having your app display something in two awkward corners of the screen.
It would be a lot easier if Apple would build something into the device to make the "top" of the browser window be underneath the notch, than developers having to put in browser/device specific CSS (aka the dark ages).
The only CSS solution I could think of to this would be to detect the device and then apply a margin-top of however many pixels the notch is, to the body tag. This would effectively "move down" the top of the webpage (and all its relative elements) so they were underneath the notch. But it's a crap solution, and not one I ever want to use.
Why not just detect an iphone x visitor & send a page that reads "Your iphone x sucks shite & you're a complete tosser for buying it. Get a life, get a real phone with a real screen, and come back when you've grown a clue."
*Cough*
Yeah I know it'll never happen, but DAYAM would it feel good to mock the more-money-than-brains idiots that splunked for a fekkin iphone x...
I assume for the sake of simplicity they allocate memory in the screen buffer for the absent pixels where the notch is. This means that app developers can have fun writing naughty messages to the invisible screen buffer which wont be discovered until they create an even bigger iPhone.