metafizzy / metafizzy/flickity-fullscreen

iPhone X in landscape mode

Open
#23 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
HTML
Stars
49
Forks
16
PR merge metrics
No merged PRs in 30d

Description

When in landscape mode on iPhone X (and presumably XS, XS Max, XR though I don't have those to test with at the moment), the fullscreen dark background doesn't extend fully to the sides of the display. Instead you see your website background bleeding through on the sides.

The issue in general is illustrated on [this page](https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/), though I hope there's also a CSS-specific fix that could be applied to `flickity-fullscreen`, rather than our entire website design.

The image gives you a sense of the issue:

![iphonexspacegrey_landscape](https://user-images.githubusercontent.com/127062/45788978-524d8980-bc32-11e8-811b-c1c1aa84b409.png)

I am able to reproduce this problem [on the fullscreen demo page](https://flickity.metafizzy.co/options.html#fullscreen).

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the issue on the fullscreen demo page in landscape mode on an iPhone X, then inspect the fullscreen styling and the CSS-specific behavior described in the linked Safari reference. Done means the dark fullscreen background reaches both sides of the display without the website background showing through, including on the related iPhone models if available.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.