back to article Web devs griping about iPhone X notch: You're rendering it wrong

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 …

  1. fedoraman

    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".

  2. Stese

    Writing website code specifcally for one browser / device... where have we seen that before???

    1. Warm Braw

      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.

    2. unwarranted triumphalism

      re: Writing for one device browser?

      The last time Apple tried this?

  3. Ken Hagan Gold badge

    "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.

    1. Argh

      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.

    2. teknopaul

      "You shouldn't be depending on a particular part of your background wash being behind a particular part of foreground content."

      what are position​, background-color, z-index, text-shadow, box-shadow and opacity all about then?

  4. Anonymous Coward
    Anonymous Coward

    I don't get it

    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.

    1. TRT Silver badge

      Re: I don't get it

      And when you turn it sideways?

      1. I ain't Spartacus Gold badge

        Re: I don't get it

        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.

        1. Anonymous Coward
          Anonymous Coward

          When you turn it sideways

          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)

          1. ThomH

            Re: When you turn it sideways

            "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.

    2. Naselus

      Re: I don't get it

      "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.

    3. nijam Silver badge

      Re: I don't get it

      Better still, stop pretending it's part of the screen, and put speakers or something else useful there.

  5. Pascal Monett Silver badge

    "there's nothing wrong with Apple introducing new technology"

    Of course not. There's already two different names for the same CSS functionality. What could possibly go wrong ?

  6. Anonymous Coward
    Thumb Down

    I don't get what the problem is...

    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.

    1. Charlie Clark Silver badge

      Re: I don't get what the problem is...

      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.

    2. David T-Rex

      Re: I don't get what the problem is...

      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.

      Hypocrisy or just double standards.

      1. Anonymous Coward
        Anonymous Coward

        Re: I don't get what the problem is...

        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.

        1. Dan 55 Silver badge

          Re: I don't get what the problem is...

          You obviously don't understand. You couldn't put the newspaper logo in the top-left corner and a drop-down menu in the top right corner. It wouldn't surprise and delight the user (or whatever Apple blingware does nowadays).

        2. wolfetone Silver badge

          Re: I don't get what the problem is...

          "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.

  7. wolfetone Silver badge

    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.

    1. This post has been deleted by its author

  8. Andy The Hat Silver badge

    Goodbye HTML

    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 ...

    1. Charlie Clark Silver badge

      Re: Goodbye HTML

      HTML isn't going anywhere and the Apple Galaxy isn't going to sell enough over the next year or so to make much difference.

      1. Anonymous Coward
        Anonymous Coward

        Re: Goodbye HTML

        It may not sell a whole lot at first due to production constraints, but it is a safe bet they'll use the same design for their whole new line next year, and there will be an installed base of a couple hundred million such phones by Sept. 2019.

  9. Anonymous Coward
    Anonymous Coward

    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!

    1. TRT Silver badge

      Don't give them ideas.

  10. Lee D Silver badge

    Waits for first website that pretends to be the wifi icon/menu, stealing your wifi passwords in the process.

    This is just Apple all-over. "We did something unnecessary and stupid because it's 'designer', the world will just have to suck it up and change the way they work just for us."

    1. FuzzyWuzzys
      Thumb Up

      Damn, you beat me to it! Exactly what I was thinking, imagine all the fun you could have putting in a fake set of icons and faking subsequent system config screen.

  11. Anonymous South African Coward Bronze badge

    Just call it the "crotch" then?

    1. Anonymous Coward
      Anonymous Coward

      "Make sure our navigation menu doesn't land in the cameltoe".

    2. ecofeco Silver badge

      More like the taint.

  12. PNGuinn

    But think of the opportunities ...

    For the advertisers to find other even more infuriating ways to provide added value services with added value annoyances to distract the the luser.

    You're understanding this wrong.

    You're the product, after all.

    You are designed to comply.

  13. Wibble

    No doubt bootstrap and the other frameworks will just roll over and add the Apple-sponsored code then virtually every boring fashion following unfriendly graphics rich vapid website will just work.

    These frameworks are a pox on design; Frontpage for the Millennials

  14. Bob Vistakin

    Leopards and spots

    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?

  15. ratfox

    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.

  16. Flywheel

    What they need is a bezel.. oh, wait...

  17. Naselus

    "The phone disappears into the experience"

    The experience in question being that of not being able to use an app properly because there's a chunk of mobile phone in the way.

  18. Anonymous Coward
    Anonymous Coward

    Possible CSS solution

    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.

    1. Anonymous Coward
      Anonymous Coward

      Re: Possible CSS solution

      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."


      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...

  19. Angus Cooke

    Is the crotch scratch 'n' sniff ?

  20. cybersaur

    ew, no

    Why would anyone spend $1000.00 on an ugly ass phone with a crotch in the middle of the screen that can't even render web pages correctly? How 'bout web designers just tell Apple to get stuffed?

  21. imanidiot Silver badge

    Or potentially...

    Web designers could start making their websites render like crap on IPhoneXs on purpose to teach Apple a thing or two about how to design a good product.

  22. Notas Badoff

    Give it a shot I say

    It should be called the 'cup', cuz they've got such big uns, and they need the protection now.

  23. StephenTompsett

    A horned beast?

    Spawn from hell?

  24. YARR

    Invisible pixels

    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.

  25. Kevin McMurtrie Silver badge


    Need to start a contest for the most Apple-offensive use for the horns. Maybe kick it off with a windows Start menu in one and an Android hamburger menu in the other.

POST COMMENT House rules

Not a member of The Register? Create a new account here.

  • Enter your comment

  • Add an icon

Anonymous cowards cannot choose their icon

Other stories you might like