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
max() that Apple plans to support in a future Safari Technology Preview release.
Jobs tells iPhone users to get a gripREAD MORE
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)."
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. ®