
Scrolling your website past the iPhone X’s notch - robin_reala
https://www.quirksmode.org/blog/archives/2017/10/scrolling_your.html
======
Isamu
What is shocking to me is that they are discussing mobile website UX in
_landscape_ orientation.

So many websites are hostile to or broken in landscape orientation I have come
to believe that nobody must use it (other than me.)

E.g. the menu bars ("dickbars") that obscure 50% of the screen in landscape
(some of them actually grow bigger in landscape.) E.g. any kind of pop-up that
can't be dismissed in landscape. The most hostile is probably the full-screen
"rotate your phone" pop-ups, for a regular website.

~~~
metaobject
I exclusively use landscape mode due to vision problems. In landscape mode, I
can zoom the text a little more and still read the text semi-comfortably
without having to horizontally scroll as much as I would in vertical mode.

I know exactly what you mean re: the bars and borders which obscure text, etc
in landscape mode. If it gets too bad, I just leave the page.

~~~
robocat
Use this bookmarklet with Chrome to hide obscuring position:fixed bars:

[https://news.ycombinator.com/item?id=15292039](https://news.ycombinator.com/item?id=15292039)

~~~
thinkling
^ This, the KillSticky bookmarklet which kills those static framing elements.

I use it all the time, even on the desktop, where those elements break
PageDown scrolling.

~~~
abrowne
I do this too, but Firefox will ignore a full-width fix bar when doing space
bar/page down scrolling, so it's less necessary. I wish Chromium would pick
that up.

------
pweissbrod
What we really need is an iphone x emulator web browser mode.

Basically a rounded chunk taken out of the left side of my monitor so i can
preview what my work will look like.

An optional virtual thumb moving about the screen would enhance the simulation
provided we can adjust the skin tone/gender.

~~~
untog
> What we really need is an iphone x emulator web browser mode.

The iOS simulator is basically this. It's included with XCode.

~~~
cbhl
Sure, but what about the people authoring web content on Windows? I'm not
talking about run-of-the-mill SWEs.

~~~
AlphaSite
Someone really should test the content on device there are ways things you
miss otherwise.

~~~
williamscales
So you are suggesting that all hobbyist web content producers should buy an
iPhone X? That seems counter to the point of having web standards and would be
prohibitvely expensive for many.

~~~
earenndil
Just use the css to make the areas around the notch black and assuming the
entire phone is rectangular in that case.

~~~
williamscales
I mean, I think this is what the default iPhone X website display algorithm
does, more or less, as I understand it. It colors the "notch margin" with
whatever is directly next to it.

Frankly, a screen that isn't rectangluar is awfully weird to me. I wonder if
we'll a) all get over it or b) make the sensors smaller to get the rectangular
screen back or c) move on to virtualized screens projected from small
wearables and forget this whole thing even happened.

------
nsxwolf
Side question, what's the most accurate way to describe the screen resolution
of a screen with a piece cut out? 2436-by-1125-minus something?

~~~
tqkxzugoaupvwqr
If it is close to a rectangle I’d say the length of the edges of the bounding
box, and a description of the shape if that is important, e.g. “2436x1125,
rounded corners, inset at top”.

------
Animats
If your site is being viewed on an iPhone X, put up a box "This site is best
viewed on a rectangular screen". Problem solved.

~~~
rconti
Brilliant, deal with something you subjectively think is broken by making the
user experience even worse.

I echo the thoughts of others here who simply never use landscape mode.

~~~
51Cards
I do believe they were joking.

------
jrimbault
Side note about this website font-size: I'm sitting in front a desktop 23"
monitor at arms length, I have to zoom to 175% to get a decent font-size. I
have a perfect eye sight.

Edit:

By decent I mean somewhere around 18px, so here between 150% and 175%. I could
read at 125%, but while I am it, why not get rid off all the whitespace on the
right by zooming and getting even more comfortable.

By perfect eyesight I do mean perfect eyesight in all possible measurements,
except reaction speed maybe.

~~~
pjc50

         body {
    	font: 0.8em/145% georgia,times,serif;
    

What does that even mean?

~~~
abritinthebay
It’s CSS shorthand.

font-size/line-height font-family

An Em is a typographical unit that basically means “the current font size”, so
it actually nests in CSS/HTML.

Default browser font size tends to be a 16pt pixel equivalent. So in this case
this is 80% of that.

Line height is obvious I think, but yeah - it’s in a % of the current font
size.

They’re just standard typography syntax (the “size/height” bit anyhow) and
units moved into CSS with no change.

~~~
nerfhammer
Actually I never realized this but aren't em and % actually the same then?
0.8em = 80%

~~~
musage
There is one caveat relating to default browser font size, but yes:

[https://kyleschaeffer.com/user-experience/css-font-size-
em-v...](https://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-
pt-vs/)

~~~
n-gauge
Unfortunately issues arise when using em's in Android webview compared to
Chrome. Em's get rendered about 8x in webview, even though the Chrome emulator
shows otherwise. I tried the % way but that doesn't fix it either.

------
csours
Obviously that is stupid looking, but what if you just had an arc that
simulated rotary-like scrolling.

[https://imgur.com/a/myebr](https://imgur.com/a/myebr)

~~~
drak0n1c
Check these implementations out:
[https://twitter.com/vojtastavik/status/907911237983449088](https://twitter.com/vojtastavik/status/907911237983449088)
[https://github.com/ZevEisenberg/ScrollSnake](https://github.com/ZevEisenberg/ScrollSnake)

~~~
mi100hael
That's literally the gif from this article...

------
dunham
I don't know what Apple actually does, but I'd suggest, for apps that don't
explicitly handle the "notch" (including the web browser), they should just
square up the edge in landscape mode and leave the bits around the notch
black.

~~~
pwinnski
That's the default. This is essentially a joke.

Well, not black, but whatever background color is defined.

------
nsxwolf
Why not? This device is going to be in millions of people's hands soon. Use
your fancy "responsive design" to improve the full screen scrolling
experience.

~~~
zitterbewegung
This is a design joke. The iPhone X will by default enclose websites in a
block that won't touch the notch.

~~~
santoriv
Thank God. For a few seconds I thought this was a real thing that we were
going to have to deal with. I was starting to have IE6 flashbacks.

~~~
new299
Perhaps you're already aware but you can absolutely render around the notch on
the iPhone X:

[https://webkit.org/blog/7929/designing-websites-for-
iphone-x...](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)

Hopefully it wont cause too many other issues though.

~~~
baybal2
It looks like the new js viewport height != 100vh issue again

------
newscracker
Though this is an experimental piece, the UI looks really terrible to me.

The entire status bar area in portrait mode (of which this new notch is a
part) should just be treated as “not part of the screen/viewport” at all
times. For any scrollable content, this area should be completely avoided in
both portrait and landscape orientations.

------
fictionfuture
With the notch, I'm sure Apple will quickly iterate to make it a positive UX
feature not a negative one. Apple has some of the best design talent in the
world, so I'm sure they considered several tradeoffs in the design.

~~~
baybal2
All api, and in house extensions they give to web devs basically do following:
break websites in all browsers, to make it work in Safari

------
hellofunk
Here's the right comment:

[https://news.ycombinator.com/item?id=15401329](https://news.ycombinator.com/item?id=15401329)

------
dingo_bat
Really stupid design from Apple. I hope this trend does not catch on. Extreme
form-over-function looks like this.

------
alkonaut
There _has_ to be a global option in iOS to just crop the screen to
rectangular?

If not, why?

~~~
pwinnski
That's the default. This is essentially a joke.

------
kharms
This site is entirely unreadable on an iPhone 6s. Not exactly a credible
source. The problem seems to be the code blocks.

~~~
coev
> Not exactly a credible source.

Peter-Paul Koch is probably the most authoritative source regarding browser
quirks outside of browser developers. Don't let a dated website design color
your view of the content.

~~~
kharms
Good to know! :)

------
gbbr
You call this script simple? Seems more like a hacky work around a bad design
decision

~~~
wruza
You must be new to the web development.

