mjackson / mjackson/shadowbox

iPhone's Overlay is Too Short

Open
#27 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
293
Forks
110
PR merge metrics
No merged PRs in 30d

Description

When a shadowbox is opened on an iPhone or iPod, the overlay doesn't reach all the way to the bottom unless the url/search bar is visible, which it normally isn't (unless you're at the top of the page, which you normally aren't). I just used media queries to single out the iPhone/iPod. Here's what I did:

@media only screen and (device-width: 320px) {
    #sb-overlay {height: 117%;}
}
@media only screen and (device-width: 320px) and (orientation: landscape) {
    #sb-overlay {height: 129%;}
}

This feels more like a hack than a fix, so I'm sure there are better ways to fix this. Any ideas?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the CSS or layout code for #sb-overlay and reproduce the issue on an iPhone or iPod in portrait and landscape, with the browser URL bar hidden. Compare the overlay bounds with the media-query workaround in the issue; done means the overlay reaches the bottom reliably in both orientations without relying on that hack.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.