This article is more than 1 year old

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

WebKit project's call for folk to slide into Apple's little slot sparks derision

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 giant calls the sensor housing. As a result, the illuminated surface of the phone no longer forms a rectangle; instead, it suggests a sort of head with horns, at least when the device is held in a vertical orientation. The upshot is that the notch appears to jut into stuff displayed at the top of the screen.

Apple prepared for its blow against screen symmetry by directing developers not to hide or accentuate the notch. It also lobbied to extend CSS to declare a "safe" area below the notch and similar widgets in which stuff can be displayed unhindered.

Now it falls to Timothy Horton, a member of the WebKit team, to sell web designers on accommodating the unusual layout geometry of the iPhone X in their website code.

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.

But to make full use of the screen up to and around the notch, he suggested designers learn how to use a new extension to the CSS viewport meta tag called viewport-fit, a new CSS function that Apple calls constant() and the CSS Working Group calls env(), and two other new CSS functions called min() and max() that Apple plans to support in a future Safari Technology Preview release.

Jobs tells iPhone users to get a grip


The response to WebKit's tweet about the safe areas has been mostly unenthusiastic. Developer Ivan Čurić‏ offered his own summary of WebKit's message – "you're rendering it wrong" – a reference to dead Steve Jobs's infamous insistence that the iPhone 4's antenna problems arose from holding the device with an improper grip, aka holding it the wrong way.

Basically, developers and designers don't want to have to write device-specific code.

Thomas Fuchs, a developer and open source framework creator, in an email to The Register, attempted to explain the dissatisfaction.

"The goal here is to put the content front and center and let the phone 'fall into the background,'" he said. "I don’t think it’s succeeding, as the notch area is quite intrusive. When the phone is held vertically (probably 90% of time you use it), the actually usable screen area isn’t larger than on a phone that doesn’t have the notch. When it’s held horizontally, the notch is just awkward. It probably doesn’t really matter when you watch a movie, but for text-based stuff like browsing or emailing it is very 'in your face' (instead of disappearing)."

More perjorative terms of the notch include the unibrow and the dickbar.

Fuchs suggests there's nothing wrong with Apple introducing new technology that demands extra work from designers, though he'd prefer a bit more support out of the gate.

"A few better defaults would probably have been a good thing," said Fuchs, noting that the forthcoming phone's content inset area supports solid background color settings but not gradients. "There’s still time before the release of iPhone X so perhaps Apple can listen to the feedback and tune how Safari works on it for sites that haven't been 'optimized.'"

Fuchs concedes that the CSS extensions Apple has supported may prove useful on round screens and other customized views for IoT displays.

At the same time, any change brings complaints – Fuchs recalled the whinging that followed the introduction of the Retina Display in the iPhone 4.

And a lack of change would probably have been worse. ®

More about


Send us news

Other stories you might like