Develop Reference

Overflow scroll won't work when div was created outside of the viewport

I'm building a full screen slider. The last slide is supposed to have a horizontal scrolling area. I'm using css translations (for a smoother animation) to bring the div inside of the viewport.
For some reason, the scrollbar won't work unless you resize the window.
My guess is that when the scrollable div is created outside of the viewport, it is not rendered by Chrome (for performance reasons?).
Then I guess when you resize, the whole thing gets calculated and redrawn and then it is taken into account.
Here is a JSFiddle that illustrates my problem.
http://fiddle.jshell.net/f3thbjqc/6/show/
Here's a video that illustrates my problem (when I wiggle the mouse is when I try to scroll right, unsuccessfully. Then I resize, and it starts working).
My setup: Mac os High Sierra. Both Chrome 69.0.3497.100, and Safari 11.0.1 (13604.3.5) behave the same, firefox doesn't have the bug somehow

Had a similar problem with the materiallize framework when i was usings tabs and a slider inside. The problem was the slider was not working and after I resized the window it was working perfectly.
Try to fire this event manually when the slider is in view
window.dispatchEvent(new Event('resize'));

Images are not rendered until after scrolling stops on iOS (PhoneGap)

I am working on a PhoneGap web app for iOS.
I have an implemented an infinite list, where as you scroll down the page, new elements are loaded from the server and added to the bottom of the page.
Each element added to the page includes images that are loaded asyncronously.
However, the images do not actually appear until after scrolling stops. This makes things appear sluggish, even though they are not - ie until I remove my finger from the device.
Does anyone know of a workaround for this problem?

This funky work around for safari will do the trick for you:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
This will add the translate property to all elements causing the IOS browser to render your off screen elements and give you a silky smooth native like feel. Remember to check your functionality as it can mess with positioning of some elements. If if does add them to the 'not' list e.g:
*not(html, button, img...

This cannot be avoided. Image rendering on webkit-gradient IOS is executed in a dedicated US thread with real time priority.
https://news.ycombinator.com/item?id=3316383

I've noticed the same problem while building my application. The UI consists of many images and it only appears to render what's currently on the screen and when you go to scroll, everything else won't render until it's finished scrolling.
A solution that worked for me was adding an overflow: auto; property to the containers in your layout. When I add it, everything renders and there are no problems when you scroll.

Issues Creating Image Sequence Animation in IE11

I'm using Skrollr.js to animate an image sequence. I took inspiration from how the http://moto.oakley.com site handles image sequences, and built some scripts to help me automate writing a series of images into the DOM. Then, I use Skrollr to change the display:none; to display:block at key scroll positions. My script preloads all the images before dispatching a complete event, and then I initialize Skrollr and allow interaction.
So, basically I have a <div> containing that has a bunch of these:
<img src="seq-000.png" data-0-top="display:block;" data-50-top="display:none;">
<img src="seq-001.png" data-0-top="display:none;" data-50-top="display:block;" data-100-top="display:none;">
<img src="seq-002.png" data-50-top="display:none;" data-100-top="display:block;" data-150-top="display:none;">
...
Now, this is working just fine in Chrome and FireFox (naturally), but Internet Explorer 11 seems to have problems rendering the images during the first scroll through the page. In other words, when I first load the page and scroll the images blink into place like they have not be preloaded, but subsequent scrolls the animation is perfectly fine. It's like IE11 hasn't rendered the images into memory, so the draw speed to the screen has a delay the first time any image is displayed.
I don't think Skrollr is the problem. Perhaps there's some magic CSS setting I should using.
Does anybody have any tips for making image sequences so they look ultra smooth everytime even in Internet Explorer?!?
Thanks!

How can I make a parallax scrolling site that works on iOS and desktop?

Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
Any help is appreciated.

Step 1: Create and object like this
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.

Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.

I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library.
It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.
Then, to create the parallax effect you have three options:
Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
Using a 2d parallax library such as stellar.js or skrollr
Building your own parallax scrolling algorithm.
Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.

Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.

Try using http://cubiq.org/iscroll-4 and stellar.js together.

Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1

Javascript and CSS Mobile Friendly Full Screen Overlay

I'm working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I'm having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don't support fixed positioning, and so I'm trying to find another way.
Right now, I'm attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I'm seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it's kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?

The solution for the flicker problem seems to be to set the overflow-x (or just overflow if you prefer) property for the <body> element to hidden. For curiosity's sake, it actually wasn't the overlay layer, but the lightbox contents that were causing the flicker.
I'm still struggling with the white gap that shows up on Android, but that's a separate problem, so I'm posting this as the solution.