What are the steps to integrate DeviceOrientationControls with scrolling on iOS 13?

I am currently using DeviceOrientationEvents data to animate the rotation of a camera in three.js using DeviceOrientationControls. The controls are updated with each animation frame, and everything is functioning as expected. However, I have noticed that when I start scrolling, no new DeviceOrientationEvent is triggered until the scrolling inertia stops.

I have confirmed this by logging from the DeviceOrientationEvent handler, noticing that events are not dispatched during scrolling. The events continue to fire up until the moment I start scrolling, pause during scrolling, and then resume after the scrolling has stopped.

Even interrupting the scrolling inertia by touching the screen causes the deviceorientation events to resume.

I have disabled other scroll event handlers in the script, made touch event handlers passive, tried making them non-passive, and disabled all touch event handlers altogether.

From my troubleshooting, it seems that the issue may be related to how the scroll thread and IMU data processing are scheduled in the browser, potentially having no immediate solution. However, I'm reaching out here in case there is something I may have overlooked. This issue doesn't seem to stem from three.js or DeviceOrientationControls, but I've tagged it just in case someone has encountered a similar problem.

In my specific scenario, DeviceOrientationControls is active while scrolling because scrolling drives the animation of a "camera rig" (consisting of animated empty objects), while moving the phone rotates the camera itself. It's akin to being able to look around while moving in a railcar.

I've tested this on an iPhone 11 Pro with iOS 13.5.1, using Chrome iOS 84 and Safari. I have not tested it on Android devices.

javascriptthree.jswebkitmobile-safarideviceorientationevent

Answer №1

In the realm of iOS, there has been a deliberate slowdown in repetitive JavaScript processes during scrolling for quite some time. This adjustment is aimed at conserving battery power, as the device needs to constantly re-render the page while scrolling, causing it to prioritize this task over other secondary commands until the scrolling action is completed. For further information, click here.

If you wish to implement your own unique scrolling mechanism without physically scrolling down an HTML page, one option is to capture vertical swipe gestures using 'touchstart' and 'touchmove'. Alternatively, you could utilize a library such as Hammer.js to assist you in this process.

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

Creating a "briefing" iframe at the top of a webpage

I'm looking for a way to allow users to embed my iframe at a specific size, like 100x100, and then have it resize dynamically to fit the page size when they click on it. I want this functionality to work regardless of how the HTML embedding the iframe ...

javascripthtmliframe

Tricks for displaying a dynamic object tooltip in Three.js

Can anyone help me figure out how to create a HUD hint effect for a moving object? I envision something like this: An asteroid is floating through space, and when I click on it, a hint box with information pops up. I've been playing around with thi ...

javascriptthree.js

What is the best way to alter the header in Django when a user is authenticated?

In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...

javascriptpythonhtmldjangovue.js

Alter the Cascading Style Sheets (CSS) value by accessing a

I have two files, keyboard.css and keyboard.js. My objective is to modify a CSS rule: .ui-keyboard div { font-size: 1.1em; } Is there an alternative method to change the font size without utilizing $(".ui-keyboard div").css()? I want the modification ...

javascriptjquery

Ways to efficiently display elements in a grid in real-time

Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness. The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading t ...

javascriptcssvue.jsgrid-layoutbootstrap-vue

Identifying the presence of a mouse inside an element using jQuery

I am working on a website that utilizes jQuery. The structure of my page is as follows: <div id="page"> <!-- Content goes here --> <div id="content"> <div class="row"> <div class="col"><!-- content goes here ...

javascriptjquery

Create and transmit an array of JSON objects

I need help with defining and sending a JSON object array. While I've managed to define a single JSON object, convert it into a string, and send it, I'm stuck on how to do the same for an array of objects. It seems like there might be a simple so ...

asp.netjavascriptjson

HTML - Retain placeholder text while user inputs

My input is structured like this: <input value="My text" placeholder="Placeholder"> Typing in the input causes the placeholder text to disappear, which is expected. However, I am looking to keep the placeholder text visible as a background behind ...

javascripthtmlcss

How can I obtain the coordinates when the mouse enters Vue?

Trying to create an animation triggered by the mouseenter event in Vue, I ran into a roadblock - obtaining the coordinates of the sections. <script setup> function fetchCoordinates(e) { const coords = { x: e.clientX, y: e.clientY } // This seems to ...

javascriptvue.jsvuejs3

Will synchronous programming on an Express server prevent other users from accessing the page simultaneously?

Currently working on a simple one-page web app that depends on loading weather data from a file. To avoid multiple HTTP requests for each visitor, I have a separate script refreshing the data periodically. In this particular instance, I am using fs.readFi ...

javascriptnode.jsexpressasynchronous

The type 'Argument of (props: ITableProps) => JSX.Element' cannot be assigned to the parameter type of... - React High Order Component

One of the tools I have in my arsenal is a loader HOC This is how the HOC looks like: const withLoader = <P extends object>(WrappedComponent: new () => React.Component<P, any>, loading: boolean) => { return class WithLoading extends ...

javascriptreactjstypescriptreact-hoc

What is the rationale behind assigning a random value to the `(keyup)` event in order to update template local variables in Angular2?

To update #box in <p>, I need to give a random value to the (keyup) attribute. Here's an example: <!-- The value on the right of equality sign for (keyup) doesn't matter --> <input #box (keyup)="some_random_value" placeholder ...

javascripttypescriptangular

Leveraging TypeScript to Access Parameters in React Router

Currently, I am delving into the realm of TypeScript usage in my React projects and I have encountered a stumbling block when it comes to implementing React Router's useParams() feature. My import statement looks like this: import { useParams } from ...

javascriptreactjstypescriptreact-routerreact-hooks

Switch the following line utilizing a regular expression

Currently, I am facing a challenge with a large file that needs translation for the WordPress LocoTranslate plugin. Specifically, I need to translate the content within the msgstr quotes based on the content in the msgid quotes. An example of this is: #: . ...

javascriptregextypescript

tips for navigating through an AngularJS $resource instance

I am facing a frustrating issue that I need assistance with. The problem arises when I try to extract specific data from each element of the stock data fetched by my controller from Yahoo Stocks. Although the data is stored in $scope.stocks and can be disp ...

javascriptjsonangularjsangularjs-resourceangularjs-http

Error: Uncaught ReferenceError - 'channel' has not been defined

I'm currently working on a Discord bot that is designed to handle tickets and I'm facing an issue with sending messages in the newly created channel I attempted using .then, but for some reason it's not functioning as expected and I'm ...

javascriptnode.jsdiscordbotschannel

Transformation of JSON output from the controller into a sophisticated entity: Razor

I have a partial view called "_SearchPanel" which includes a dropdown list for selecting years, a multiselect control for classes (along with some other drop downs - omitted), and a search button. My goal is to only refresh/update the classes list when ch ...

javascriptc#jsonasp.net-mvcrazor

Utilizing Google Web Fonts in Gatsby with Custom Styled Components

While using createGlobalStyle from styled-components for global styling, everything seems to be working fine except for applying Google fonts. I have tried multiple ways but can't seem to get it to work. Here's the code snippet: import { createG ...

javascriptreactjsgatsbystyled-components

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question : Here is the HTML code snippet: <div class="a b"> <span class="one">Success ONE</span> <span class="two">ONE</span> </div> <div class="a b"> <span class="one">Success TWO< ...

javascriptjqueryhtmlcss

Await that's locked within a solo asynchronous function

async function submitForm(e){ e.preventDefault() console.log(e.target) try { const response = await axios.post('/api/<PATH>', {username, password}); console.log(response.data); const token = response.data.token if (t ...

javascriptasynchronousasync-awaitaxiosnext.js