Comments (15)
Bleh. Just tested on my phone and it seems genuinely broken. I fear this is some obscure ScrollMagic bug.
from atypicality.
Thinking out loud here: the weird thing is that I can't reproduce this on desktop if I just shrink my browser window to be really small. So it's got to be some kind of intrinsic difference between scroll events on mobile devices vs. desktop.
Setting loglevel: 3
on the outer scene (in story.js
) gives debug-level updates in the console as you scroll, e.g.
14:22:11:548 (ScrollMagic.Scene) -> event fired: update -> {startPos: 929, endPos: 22889, scrollPos: 845}
Based on that, it seems like a couple weird things happen on mobile:
-
Scroll updates seem to randomly drop or get delayed for long periods
-
The numbers don't make sense. e.g. when I scroll the top of the story element to the top of the viewport (the point at which the scene should begin) the logging says:
14:24:43:763 (ScrollMagic.Scene) -> event fired: update -> {startPos: 1052, endPos: 38655, scrollPos: 712}
Based on the heights of the .intro
and .prose
elements at the start, it seems like startPos
is accurate. So for some reason ScrollMagic is underestimating the distance that I've actually scrolled?
from atypicality.
This probably explains the delayed updates (which seem relatively innocuous): http://scrollmagic.io/examples/advanced/mobile_basic.html
from atypicality.
window.pageYOffset
agrees with ScrollMagic?! The plot thickens.
from atypicality.
The problem seems to be specifically that on mobile, no change is registered to window.scrollY
until after p#intro-text
(i.e. it's treating the document as beginning after that element).
Which is... really weird
from atypicality.
Sorry for the late chime in here. Just escaped a meeting. Are you still seeing this? I'm cheating here by using the mobile emulator in Chrome, but if I console log window.scrollY it seems to pick up there right from the outset
from atypicality.
Yup, still seeing it. What I'm doing to repro it is:
- Open mobile emulator in chrome (I'm using Nexus 5x as the device)
- Refresh until it 'looks right' (I'm not sure why, but sometimes I need to do this a few times or do a hard reload before it seems to properly respond to the new viewport dimensions)
- Scroll to the top
- In the console, type
window.scrollY
, get 0 - Scroll down a little bit and repeat. I still see 0.
- Continue until scrolling past the intro paragraph (above the author info). Only then does
window.scrollY
start becoming positive.
from atypicality.
(Also, if you want to see the manifestation of this bug, just open https://colinmorris.github.io/atypicality/ on your phone and scroll down to the radar chart. At least on my device running mobile chrome, the radar chart doesn't get pinned until far too late)
from atypicality.
I'm also seeing a bunch of cases where, after scrolling past the 0-point, scrollY
seems to get stuck for a while at a certain positive value (waiting doesn't seem to cause it to change, but if I scroll enough, it eventually unsticks).
from atypicality.
One suspicion I had was that this was some kind of ScrollMagic bug, where it was intercepting scroll events and doing weird things with them, but that doesn't seem to be the case. If I comment out the ScrollMagic imports from my js files, I still see the same thing.
from atypicality.
I just tried the site in Firefox (first the mobile emulator then on my phone), and it's totally fine. So I guess whatever this is is Chrome-specific.
from atypicality.
Huh. I failed to refresh last time after opening the emulator. Noted the weirdness with the text only taking up about 1/2 of the viewport but honestly didn't think much of it (just assumed there was a width declaration that was constraining it somewhere). Have checked it in Safari on iPhones and it seems to work as expected. Trying to hunt down an Android device.
from atypicality.
This fixed it! https://stackoverflow.com/a/44680066/262271
(Now I'm really curious to dig into why)
from atypicality.
Fantastic! So odd that it seems to be specific to Chrome on Android. Works perfectly fine on Chrome on an iPhone without that addition
from atypicality.
TIL about visual vs. layout viewports: https://developers.google.com/web/updates/2017/09/visual-viewport-api
As it turns out...
window.visualViewport.pageTop
gives the scroll position I'm looking forwindow.visualViewport.pageTop == window.visualViewport.offsetTop + window.scrollY
Basically what this means is that for the first 448 pixels of scrolling or so, the layout viewport (whose position is given by window.scrollY
) is fixed, and the visual viewport is moving down within the layout viewport, until the bottom of the visual viewport meets the bottom of the layout viewport.
All this is because the layout viewport is much taller than the visual viewport.
> window.visualViewport.height
667.0000610351562
> window.visualViewport.width
375.0000305175781
> window.innerHeight
1116
> window.innerWidth
627
In this case, Chrome is supposed to be emulating an iPhone 7 with dimensions 375 x 667. So where the heck do 1116 and 627 come from?
window.visualViewport.scale
seems like a likely culprit, especially since the whole solution to this mess was basically to disable pinch-zoom by setting user-scalable=no. But nope, window.visualViewport.scale == 1
.
So at this point I'm at a loss for further explanation.
from atypicality.
Related Issues (20)
- Fix load-font.js bugs HOT 1
- Try moving spotify embeds to prose
- Replace curly braces with quotation marks in intro.hbs
- Fix spotify embed codes for Royals and Fancy
- In mobile view, hide/fade sticky radar graphic until after the first card HOT 4
- Give year h3 headings a card-like appearance
- Fine-tune spacing between cards HOT 2
- Second dropdown in song-explorer mobile mode for contrast song
- Years/decades in song-explorer controls shouldn't overflow edge of viewport HOT 2
- Assorted css fine-tuning HOT 1
- Strip hidden debugging helpers
- Restore height of radar chart in story section
- Clear out remaining Pudding meta tags HOT 1
- Text of year slider in main story is kind of tiny on mobile HOT 1
- Hide <hr> dividers on mobile (or restyle) HOT 2
- Test on other browsers
- Tweak layout of spotify players HOT 3
- Update Decade and Year Selectors in Song Explorer
- Try restyling the radar markers?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from atypicality.