Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

On mobile, the logos pop up first - can we move it to the bottom? #148

Open
GovInTrenches opened this issue Dec 16, 2014 · 5 comments
Open

On mobile, the logos pop up first - can we move it to the bottom? #148

GovInTrenches opened this issue Dec 16, 2014 · 5 comments
Assignees
@ghing
Labels
in progress

Comments

@GovInTrenches
Copy link

On mobile, the logos pop first. Can we make the content pop above that?
@ghing
Copy link
Contributor

ghing commented Dec 16, 2014

@GovInTrenches I'm trying to figure out what's up with this. I didn't see anything weird when I tested with the emulated viewports in Chrome Developer Tools, but when I test on my phone, I'm seeing the sponsor logos load first, then the rest of the content, but the leader image (the courtroom) takes longer to load. Is this what you're seeing? Can you also tell me what device and OS version you've been testing on?

My suspicion is just that the big intro image takes longer to load because it's a bigger file.

@GovInTrenches
Copy link
Author

Safari - iOS8 on an iPhone 4S

I think Dan'a using an Android phone

Christopher Whitaker

(Sent from iPhone)

On Dec 16, 2014, at 15:03, Geoffrey Hing notifications@github.com wrote:

@GovInTrenches I'm trying to figure out what's up with this. I didn't see anything weird when I tested with the emulated viewports in Chrome Developer Tools, but when I test on my phone, I'm seeing the sponsor logos load first, then the rest of the content, but the leader image (the courtroom) takes longer to load. Is this what you're seeing? Can you also tell me what device and OS version you've been testing on?

My suspicion is just that the big intro image takes longer to load because it's a bigger file.

—
Reply to this email directly or view it on GitHub.

@ghing
Copy link
Contributor

ghing commented Dec 20, 2014

Note to self: works ok on Chrome 38 on Android KitKat, Samsung S4 with Cyanogen Mod 1080x1920 res, full high-def screen

@ghing
Copy link
Contributor

ghing commented Dec 21, 2014

Looked at this closer on Android Chrome, and the image displays, but the parallax effect doesn't work. I think the fix for this is to disable the parallax effect on narrow widths.

ghing added a commit that referenced this issue Dec 23, 2014
@ghing
Disable parralax title on touch devices
c99b714 
There were two problems with the parallax scrolling on mobile
devices.  First, many touch devices don't support
``background-position: fixed``.  This was the case for even
Chrome 39 on Android.

Furthermore, older browsers, such as the Android browser on
my phone don't support viewport units.

Use a custom build of Modernizr to detect non-touch, viewport
unit supporting browsers and only enable the parallax effect
in those browsers.

For unsupported browsers, just show a fixed, full-height image
with the overlay.  It's not as pretty, and you don't get to
experience the image without the overlay, but it keeps things
simple on mobile.

Addresses #148
@ghing ghing self-assigned this Dec 23, 2014
@ghing
Copy link
Contributor

ghing commented Dec 23, 2014

@GovInTrenches I think I got this working via a simpler, non-parallax cover page on touch devices. Can you check if the cover image now shows up on your phone when you visit http://convictions.staging.terrorware.com.s3-website-us-east-1.amazonaws.com/? If that works, I can deploy it into production Tuesday night.

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@ghing ghing

Labels
in progress
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ghing @GovInTrenches