Foundation.mozilla.org: Landscape mode on iPhone X looks odd

Created on 20 Oct 2018  路  24Comments  路  Source: mozilla/foundation.mozilla.org

The background doesn鈥檛 span the entire page or something.

https://foundation.mozilla.org

bug engineering frontend
Source
picture alanmoo

All 24 comments

2472b46c-aed6-4846-9eb0-d7c536cbe965

alanmoo picture alanmoo on 20 Oct 2018

I noticed this happens in Firefox app on iOS, but works fine in Safari iOS (haven't checked other browsers.)

I was looking into this and trying to set up 'Debugging Firefox OS over WiFi' ( https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi ). This page seems out of date, and settings panel in neither the Firefox iOS app or the desktop app show anything about debugging over wifi. Am I missing it? Anyone know of another way to debug this in Firefox iOS?

tristandenyer picture tristandenyer on 23 Oct 2018

It also looks weird in Chrome iOS, so perhaps it's a bug in iOS's rendering? Apparently you can't debug a WKWebView page unless you've built the app (Firefox) yourself in Xcode. See this ticket and I confirmed in Mozilla's Slack.

alanmoo picture alanmoo on 23 Oct 2018

Part of this is probably that the html element background is black, but I'm not sure about the extra horizontal scrolling.

alanmoo picture alanmoo on 23 Oct 2018

(If I assume this correctly) I think the horizontal scrolling you are seeing in the screenshot is the persistent iPhone X grab bar thing at the bottom of the screen. Mine on iPhone X does not scroll horizontally.

tristandenyer picture tristandenyer on 24 Oct 2018

This got resolved recently through various PRs that solved issues that had aspects of this showing up even in portrait mode.

Pomax picture Pomax on 23 Nov 2018

Nope, still there. I think this is something related to the iOS web-view implementation that 3rd party browsers use, so the end result of this may be an Apple bug report, but I want to leave it open for now.

alanmoo picture alanmoo on 27 Nov 2018

can you check what these three tests do?

  1. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-scroll-x-test.html
  2. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-scroll-y-test.html
  3. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-no-scroll-test.html
Pomax picture Pomax on 28 Nov 2018

All 3 seem to have y scroll in Firefox on an iPhone XS. (Can you change the background color on them in the future? I think that might make it easier to see)

alanmoo picture alanmoo on 28 Nov 2018

More tests:

  1. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-pos-rel-scroll-x.html
  2. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-pos-rel-scroll-y.html
  3. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-pos-rel-no-scroll.html
Pomax picture Pomax on 28 Nov 2018

unadjustednonraw_thumb_9d5e
unadjustednonraw_thumb_9d5f
unadjustednonraw_thumb_9d60
unadjustednonraw_thumb_9d61

alanmoo picture alanmoo on 28 Nov 2018

Wat. Okay, let's try this on body...

Pomax picture Pomax on 28 Nov 2018

Three more:

  1. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-rel-body-x-scroll.html
  2. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-rel-body-y-scroll.html
  3. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-rel-body-no-scroll.html
Pomax picture Pomax on 28 Nov 2018

Looks identical to the previous set, by my eye.

alanmoo picture alanmoo on 28 Nov 2018

I guess that blows a stackoverflow claim that position:relative on the body should make ios fall in line out of the water then.

Pomax picture Pomax on 28 Nov 2018

Once again!

  1. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-rel-div-no-scroll.html
  2. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-rel-div-x-scroll.html
  3. https://pomax.github.io/nightly-is-upgrading-an-insecure-display-request/ios-rel-div-y-scroll.html

This time with a top level viewport-edge-anchored fixed div.

Pomax picture Pomax on 28 Nov 2018

This is interesting. Seems to work (and this is what I get on iOS Firefox when scrolling the last one to the side) image

alanmoo picture alanmoo on 28 Nov 2018

Notice the white space, which is visible in all cases. It's matching what's described in the 3rd image of https://webkit.org/blog/7929/designing-websites-for-iphone-x/

alanmoo picture alanmoo on 28 Nov 2018

Let's solve this in stages. First let's get the overflow fixed for most devices, and then worry about whether we want to spend time fixing a problem only people with a $1200 phone run into.

Pomax picture Pomax on 28 Nov 2018

Yeah, this ticket is certainly lower priority than #2292. I'm fine leaving this as something a contributor or new hire can pick up on if they have interest.

alanmoo picture alanmoo on 28 Nov 2018
👍1

Is this still affecting us, @alanmoo? (I think we fixed this, but I need your device to confirm =)

Pomax picture Pomax on 29 Jan 2019

Still wonky.

alanmoo picture alanmoo on 29 Jan 2019

@alanmoo is it stillll wonky?

kristinashu picture kristinashu on 26 Mar 2019

No, it got fixed somehow! Huzzah!

alanmoo picture alanmoo on 27 Mar 2019
🎉1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hannahkane picture hannahkane  路  3Comments
kristinashu picture kristinashu  路  4Comments
benhohner picture benhohner  路  4Comments
alanmoo picture alanmoo  路  3Comments
kristinashu picture kristinashu  路  3Comments