How do you force iOS to paint a DOM render when using requestAnimationFrame while scrolling?

By alterob

I am trying to recreate the parallax effect from the iMac pro website however while they have only two elements I am looking to allow for more elements to have the same effect afterwards.

What I have done is set up four blocks that all have positioning: sticky.
When a sticky element reaches the top of the viewport that element begins to wipe in by a clip-path value that is calculated in the requestAnimationFrame loop below.

function repeat() {
    for (var i = self.childElementsReversed.length - 1; i >= 0; i--) {
        var value = (function(){
            //Set clip path for first element
            if (i == 0) {
                return (self.childElementsReversed[i].offsetHeight  * i) - (self.childElementsReversed[i].offsetTop);
            //Set clip path for elements that are now stickied
            else {
                return ((self.childElementsReversed[i].offsetHeight  * (i + 1)) - (self.childElementsReversed[i].offsetTop));//(self.childElementsReversed[i].offsetTop));
        self.childElementsReversed[i].style.cssText = self.childElementsReversed[i].style.cssText + self.prefix.css +'clip-path:inset(' + value + 'px 0px 0px);';

This loop works fine on most browsers however when this loop is run on an iOS device it will only update the values for about 1/5th of the page (originating from the bottom up). From there on in when I stop scrolling it will then redraw the scene.

I understand that an issue with using offsetTop in my value calculation is that it can be very taxing as it forces a layout reflow. If I sub out self.childElementsReversed[i].offsetTop for something like scrollTopY the value update runs flawlessly.

I have attempted some other css based fixes that can force a repaint such as, setting translateZ(0), adding and removing display: none and adding and removing an animation. None of which have solved the issue.

Is there any way to force iOS to repaint the scene on scroll?
Alternatively if that isn’t possible is there an alternative way to get the offsetHeight value without forcing a reflow?

Source: Stack Overflow


Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273