
Handling Notch on iPhone X, XS, XR, XS Max - marvindanig
https://bubblin.io/blog/notch
======
remote_phone
I’ve had iPhone X since day one, and an iPhone user since version 3. I can
honestly tell you that the notch doesn’t bother me. I don’t even notice it at
all, even on landscape mode. Maybe to designers the idea of it is ugly, but in
practice I’ve never once in a year thought “that notch is a bad idea and it
made my experience worse”. I just forget about it.

And for the record I’m not a fanboy. I use Windows at home and boot camp my
work laptop to windows as well because I hate MacOS. The iPhone is the only
apple product I’ve owned and am open to switching to android if they ever gave
me a compelling reason to switch, which they haven’t yet.

~~~
kuwze
Everyone complains about the notch, but what about the lack of a button? That
is what made me choose an 8.

~~~
misframer
I don't miss the button. What didn't you like about the missing button?

~~~
mcraiha
It is much easier to just press home button and current content will vanish
from the screen. And physical buttons are way better when you are
walking/running.

~~~
wycy
You can just swipe up from anywhere on the bottom of the screen, there's no
on-screen target you need to hit, so it's just as easy to do it while
walking/running/without looking. I do it while running all the time.

------
thomasfedb
Add 'are rectangular' to the list falsehoods programmers believe about
screens.

~~~
martin-adams
It'll be interesting to see if Apple ever make a circular Apple Watch. I can
see a scenario where the strap even incorporates some flexible screen which
would be utilised for additional status and content.

~~~
batteryhorse
Instead of cartesian coordinates, you could just program it using polar
coordinates. And ring buffers.

------
osrec
While the phone may look beautiful to a lot of people, that notch is horrible
to design a UI around. Even the screenshots in the article look terrible after
the suggested adjustments. I really hope the notch eventually goes away.

~~~
justwalt
When Apple finally revealed the first image of the new iPhone during their
event, the background on the phones didn’t reveal the notch at all, so I
thought they’d done away with it. I wonder if it was on purpose.

~~~
johnhenry
[https://gizmodo.com/apple-magically-makes-the-notch-
disappea...](https://gizmodo.com/apple-magically-makes-the-notch-
disappear-1829056511)

It's super long-winded (like many things from gawker) but essentially, the
photos are black around the notch specifically to hide it.

------
Someone1234
It is an odd design choice on Apple's behalf to make the sides of the notch
usable/drawable. With an OLED screen you can easily black them in such a way
so they "disappear" in horizontal. Keep them for OS status in vertical
orientation.

~~~
marvindanig
Matching rgba() to the hardware around it is a very interesting take!

Isn't the notch in landscape mode similar to how we used to have these
feedback buttons on the left or right of the screen with absolute positioning?
Uservoice and GetSatisfaction come to mind.

~~~
shawnz
> Matching rgba() to the hardware around it is a very interesting take!

I dont think they are saying that, just that the infinite contrast ratio of
OLED allows you to hide the black pixels very well.

------
sschueller
Don't waste your time. The notch will be gone at some point and Apple will be
claming to be the first to do so.

~~~
bdcravens
What features has Apple removed shortly after introducing them? Historically
Apple has stuck with its changes, even when they are accompanied by negative
feedback.

~~~
Jaruzel
3D touch has gone. It's not on some of the newer models. Didn't last very long
at all.

~~~
jsjohnst
The only newer model is the low end iPhone XR, and I’m fairly certain that was
purely from a cost/margin perspective.

~~~
bdcravens
Plus it essentially replaced the previous low cost option, the SE, which also
didn't have the feature.

------
ConfusedDog
It only bothers me in the aspect ratio that takes the full screen, which is
rare. Otherwise, I think iPhone X design looks better than iPhone 8. Some
websites do need this fix.

~~~
marvindanig
> iPhone X design looks better than iPhone 8…

Absolutely, it's a stunningly beautiful phone!

I sense that the newly announced iPhones have a smaller notch compared to the
iPhone X. If that is true then we can assume that Apple is working on reducing
the notch height to a point where it goes seamless with the frame and then
we'll have the entire glass surface to play on.

~~~
phinnaeus
It's exactly the same.

------
dep_b
The notch is pretty awful when watching full-screen content in landscape
orientation indeed. And no way to get around it in most software. Less
annoying but still a distortion are the rounded corners. There should be an
option while watching media to simply fill the screen without clipping.

Does Samsung have similar ways to help you prevent displaying content on the
distorted sides of an Edge screen?

~~~
sorahn
The phone does this by default. You have to double tap the video to zoom in to
get the notch/corners to cut some of your video.

~~~
dep_b
Funny, I only ever see demos of movies and games on the iPhone X with all of
the cutouts.

------
holowire
> Here’s a simple fix to use all the extra space. To tell the browser to
> expand into the display cutout (notched) area, set the viewport-fit property
> to cover like so...

This honestly looks worse than having white margins in my opinion. While the
white margins aren't ideal, they are still a better visual solution than fully
extending the page to the left and right. Content should be given enough space
as to not visually interact with the rounded corners, otherwise it reflects
poorly on the site designer, as if they didn't account for it. So, forcing the
page within the confines of the non-rounded area is a better global solution
that offers better visual consistency. That said, I think either a blacking
out the margin would be more visually appealing and not draw as much attention
to the actual notch area, but forcing margins by default is the right call.

------
kalleboo
This is great info, I had no idea this was possible.

Is this also supported on all these new Android phones with notches?

------
aaaaaaaaaab
People complaining about the notch or the rounded corners behave as if
overscan wasn’t a thing for decades on TV sets...

------
nzjrs
The total development effort apple has caused to be wasted on this monstrosity
is nothing but depressing.

~~~
ovao
Five lines of CSS isn’t an extraordinary amount of development effort.

~~~
keraf
Not all websites are built the same, some might require more than just five
lines of CSS. Add to that QA to make sure it works. And purchasing the
device(s) to test that it really looks fine (plus setting up remote debugging
if it needs adjustments) or writing something to replicate the notch behavior.
It's one more thing to support in already many things we have to think about
when doing web development (different browsers, OS, screen sizes, orientation,
available features, ... and now the notch).

Apple could have used the space around the notch for some browser UI for
example and spared us the extra effort to make our websites look good (or even
be functional) with that notch. At the end of the day, it's their customers
that are benefiting from a good/better browsing experience.

------
tomcooks
I don't have to handle "the notch", that thing (and the toxic company behind
it) has to handle the web or gtfo.

