"Mobile Safari experiences a delay in executing JavaScript DOM changes during touchmove events, waiting until the scroll

While using mobile safari, I encountered an issue with the touchmove event where changing the className of an element did not result in an immediate visual change. The update only appeared at the end of scrolling or after an inertial scroll.

Is there a way to ensure that the visual change from updating the className, innerHTML, or style properties happens immediately?

Additional Info: It seems this delay in visual updates is not specific to className changes but applies to any modifications made to the DOM elements.

javascriptiossafariclassnametouchmove

Answer №1

I was the creator of that website, and I found a solution to work around the limitation by not using the typical browser scrolling functionality. Instead, I implemented a fake scroll method. By listening to scroll wheel and keyboard events in JavaScript, I adjusted the CSS top property of the main container to match its own 'scrollTop'. The scrollbar on the right side is custom-made with JavaScript, synchronized to the internal 'scrollTop' value.

The entire site operates as one continuous animation, with the main timeline determined by its scrollTop position and triggering all sub animations at specific times. If you're curious about the implementation, feel free to check out the ScrollAnimator.js file where the unminified code is available for examination.

Answer №2

Unfortunately, iOS Safari is designed in a way that queues up all DOM manipulation until the end of a scroll or gesture, effectively freezing the DOM during scroll operations.

I attempted to locate more information on this behavior from an Apple developer page, but could only find a reference in jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.

It's important to note that iOS devices freeze DOM manipulation during scrolling, applying them only when the scroll is completed. We are currently exploring ways to enable DOM manipulations before a scroll commences.

I hope this explanation helps shed some light on the issue!

Answer №3

To achieve the desired effect, simply modify the position to -webkit-sticky. Avoid setting a top value so it maintains the appearance of a regular element while functioning like a fixed element. Additionally, you can freely adjust its style without delay.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes variables and functions to behave differently when it comes to hoisting?

I've recently been delving into some documentation and have noticed some inconsistencies in hoisting patterns within JavaScript. Consider the following examples: When it comes to functions, function abc(){ console.log("worked") } abc(); OUTPUT : ...

javascripthoisting

Enhance text search functionality using AngularJS

Just starting to learn angularjs. Below is the code I've written: $scope.styles = [{"name":"walking"},{"name":"Food"},{"name":"culture"}] I have created a checkbox list <div ng-repeat="style in styles"> <input type="checkbox"> {{ ...

javascriptangularjs

An error occurred while trying to choose a photo from the iPad camera roll using the pop over controller

I am in the process of converting an iPhone app to a universal app. One of the features I am working on involves selecting a photo from the camera roll by clicking a button in a table view controller. I encountered an error that suggested using a popover c ...

objective-ciosipaduipopovercontrollerios-universal-app

What is the best way to display only li elements that possess a specific class utilizing javascript / jquery?

I have a bunch of li's: <ul> <li class="one"></li> <li class="one"></li> <li class="two"></li> </ul> and I want to display only the ones with the class "one" I attempted something like thi ...

javascriptjqueryfilterswitch-statementeach

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

I am currently utilizing the jQuery code below to dynamically create multiple input fields, which include time pickers and date pickers. However, I am encountering an issue where they are not functioning as expected. $('#add_another_event').clic ...

javascriptjqueryhtml

javascript how to trigger a change or input event when handling a paste event

I have successfully overridden the paste event on the document object, but now I want to trigger the onchange, oninput, and other input events in the event handler for the paste event. document.addEventListener('paste', function (e) { ...

javascripteventsonchangepaste

Tips for incorporating an if statement into embedded HTML using JavaScript in order to reveal a CSS class

How can I dynamically display different classes based on the presence of data in a JavaScript array? For example, if there is responseData.title, show the class 'grey'; otherwise, show the class 'white'. This is what I am attempting t ...

javascriptjquery

Extract the height of children from the height of their parent

Hey there! I recently discovered a fantastic plugin that helped me achieve equal heights for all the divs on my website. If you're interested, you can check out the plugin here. $('.item-container').responsiveEqualHeightGrid(); However, I& ...

javascriptjqueryhtmlcss

Widget Issue: Problem with Setting jQuery Datepicker Format to European Style

I could really use some assistance with this issue. My goal is to display the check-in and check-out dates in European format (dd/mm/yy) within the input field on this specific page: (username: 'numberone' ; pass: 'num270514'). When t ...

javascriptphpjquerydatedatepicker

Implementing Pagination for a JSON Object using Javascript and Jquery

I am looking for the most effective way to implement pagination in my current situation: I am using "$('body').append(htmlText);" to display the items from a JSON object. How can I set up pagination so that each page displays only one item based ...

javascriptjqueryjsonpagination

ObjectArray in Node.js

Building an object array in my node app involves transforming another object array. Let's assume the initial object array is structured like this... levels: [ { country_id: 356, country_name: "aaa", level0: "bbbb", level1: "cccc", level2: "dddd", le ...

javascriptnode.js

I am unable to retrieve all the selected checkbox values from the pug template in Express

If you are following the Express MDN tutorial here, you might have encountered an issue with pulling in checkbox values from Pug. In the tutorial, req.body.genre is expected to return an array of selected values from a form. The code snippet for this func ...

javascriptnode.jsexpressmongoosepug

Customizing external elements with React's inline styling feature

Trying to use React to style elements generated by a third-party library has been a challenge. In the snippet below, I was able to achieve the desired styling using CSS, but now I am looking to accomplish the same using JavaScript. This way, users can defi ...

javascriptcssreactjs

Creating a Dynamic Chatbox with JavaScript and Asynchronous Loading技术

I have spent hours going through various demos, AJAX, and JavaScript tutorials, but I am still struggling to make this work properly. Here is the code I currently have... function createRequestObject() { var ro = false; if (window.XMLHttpRequest) { ...

javascriptajax

Encountering a problem with configuring webpack's CommonsChunkPlugin for multiple entry points

entry: { page1: '~/page1', page2: '~/page2', page3: '~/page3', lib: ['date-fns', 'lodash'], vendor: ['vue', 'vuex', 'vue-router'] }, new webpack.optimize.C ...

javascriptwebpackvue.jscommonschunkplugin

Removing duplicate elements from an array using lodash

What is the best way to remove duplicate values from an array? var numbers = [1, 1, 5, 5, 4, 9]; I want my result to be: var numbers = [4, 9]; Is there a method in lodash that can help me achieve this? ...

javascriptlodash

Enhance the FPS of your three.js application by optimizing performance through CanvasRenderer

I have a tube shape made up of 18738 points stored in a JSON file. The tube is constructed using 2000 points (considering every 9th point). It is comprised of 2000 segments (a requirement), each segment has 12 faces with individual colors applied to them. ...

javascriptjsonhtml5-canvasthree.js

What steps should be taken to set up es-lint to issue a warning or error when useState is implemented

Is there a way to generate a warning or an error when someone tries to access useState instead of the state provider? I have not been able to find any rules regarding this, but willing to implement a custom rule if necessary. ...

javascriptreactjseslint

Dealing with multiple parameters within the app.param() function

Currently, I am developing an API using Express.js and facing a challenge in implementing an app.param() function for handling the id parameter in a GET request: app.param('id', (req, res, next, id) => { const envelopeIndex = Number(id); ...

javascriptnode.jsexpressrestmiddleware

module 'next/router' cannot be located or its associated type declarations are missing

Running into some issues with my NextJS application. An unusual error message is appearing, even though my code is functioning smoothly without any errors. import { useRouter } from 'next/router'; // Cannot find module 'next/router' or ...

javascripttypescriptnext.js