Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions).

This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at the moment. (Issue raised on fullpage.js github)

It appears that when applying two different translate values consecutively to the same element within a short timeframe, the element resets its position to 0 when the new value is applied, causing the previous transition to be missed.

Although I couldn't isolate and reproduce the issue as cleanly as desired, I managed to create a test scenario:

http://jsfiddle.net/9ksx000q/3/

To replicate the problem, simply scroll down. You'll observe it returning to the previous section with each consecutive scroll. For example, you'll see the first red section displayed twice.

If you perform the same test in a different browser, the issue won't be present.

The transitions I'm applying in this case (depending on viewport size) are as follows:

translate3d(0px, -641px, 0px);
translate3d(0px, -1282px, 0px);
translate3d(0px, -1923px, 0px);

However, between the 1st and 2nd, and the 3rd and 4th transitions, it seems to revert back to translate3d(0,0,0);, resulting in the first section being repeatedly displayed as the starting point.

javascriptjquerycssgoogle-chrome

Answer №1

To achieve the desired result, simply invoke it within an animation frame

http://jsfiddle.net/9ksx000q/4/

The issue seems to stem from simultaneous execution of animation and position calculation, leading to unexpected behavior

requestAnimationFrame(function () {
    var dtop = element.position().top;

    element.addClass('active').siblings().removeClass('active');

    canScroll = false;

    var translate3d = 'translate3d(0px, -' + Math.ceil(dtop) + 'px, 0px)';
    $('#container').css(getTransforms(translate3d));

    // Allow scrolling again after animations finished
    setTimeout(function () {
        canScroll = true;
    }, 1000);    
    // 1000s is the set time in CSS for container transition
    // transition: all 1000ms ease-in-out;
});

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

Tips for transferring client-side data to the server-side in Angular, Node.js, and Express

Seeking a straightforward solution to a seemingly basic question. I am utilizing Angular's $http method with a GET request for a promise from a specific URL (URL_OF_INTEREST). My server runs an express script server.js capable of handling GET reques ...

javascriptangularjsnode.jsexpressangularjs-http

Interfacing Contact Form Data from Vue Application to Magento Using API - A Step-by-Step Guide

Introduction A custom vue-component has been implemented on the application, serving as a contact form. This component is imported into the header component and enclosed within a modal container. The primary function of this contact form is to trigger an ...

javascriptvue.jsvuejs2vue-directivesvue-storefront

The act of sending back Null from the Array.map() function

I've been attempting to retrieve data from a JavaScript object using the array.map() function. However, the result I'm receiving is null. I'm confused as to what the issue might be. Here's the object: export const Course = [ { co ...

javascriptreactjsarraysremix

The .NET controller does not receive traffic for the GET method

Having some trouble populating a table with JSON data using angular ng-repeat. No errors are showing up in the console, and my breakpoint in the .NET Controller isn't being triggered. Here's the code for the App Controller: var app = angular.mo ...

javascriptc#angularjsasp.net-core

A pattern matching formula to eliminate specific characters from the beginning to the end of a string

I am facing an issue with extracting content from a given string: var string = "From: Sarah<br /> Sent: 10 May 2021 09:45:20</br /> To: Alice<br /> Subject: Meeting Reminder<br /><br /> Hi Alice, <br /> Here is a ...

javascriptregexsubstringsplice

Is it possible to access a PHP variable from a different file in an HTML file?

Can someone help me with separating the javascript from this php file? I need to specify where the javascript should look for the php file, as currently it only executes within the php file. <?php date_default_timezone_set('Europe/London'); r ...

javascriptphpjson

Fixed Container housing a Child Div with Scrollbar

I am faced with a challenge involving a lengthy navigation menu (.nav-main) nested within a fixed header (header). When the navigation menu is toggled using jQuery .toggle(), the content extends beyond the window height and does not scroll. I am looking fo ...

javascriptjquerycss

Attempting to invoke a promise within a function yields an error message stating that it lacks call signatures

Recently, I came across this interesting class: export class ExponentialBackoffUtils { public static retry(promise: Promise<any>, maxRetries: number, onRetry?: Function) { function waitFor(milliseconds: number) { return new Pr ...

javascripttypescriptes6-promise

Tips on preserving a dynamic web page within a Cordova application

I have developed a project and To Do list App that operates on a single HTML page with just an "add To Do list" button. Users can click on this button to create a To Do list and add tasks within it, all of which are dynamically generated as HTML elements. ...

javascriptjquerycordova

Display a specific template in the detail grid of the Kendo Grid depending on certain conditions

I've been using the Kendo Grid and it's been working well for me. I have a requirement to check each row in my grid to see if it contains a specific value, and based on that, bind data using different templates. Is this feasible? Below is the cod ...

javascriptjsonkendo-uikendo-gridkendo-datasource

Having trouble showing the fa-folders icon in Vuetify?

Utilizing both Vuetify and font-awesome icons has been a successful combination for my project. However, I am facing an issue where the 'fa-folders' icon is not displaying as expected: In the .ts file: import { library } from '@fortawesome/ ...

javascripttypescriptvue.jsvuetify.jsfont-awesome

Leveraging VueJS 2.0 server-side rendering: Maximizing data retrieval efficiency with preFetch and beforeRouteEnter techniques

Exploring VueJS server-side rendering and troubleshooting some issues. Using the latest VueJS Hackernews 2.0 as a starting point for this project. Currently facing an obstacle: The server fetches data using the preFetch method. All seems well. When a use ...

javascriptvuejs2vue.jsserver-side-rendering

Having Trouble with Your React.js Rendering?

I'm starting to learn React.js but I'm having trouble rendering it into the HTML. I can't figure out what's wrong. Any help would be greatly appreciated. Below are the HTML and JSX code: (Note: Full links to the react library are incl ...

javascriptreactjs

Loop through options in Vue.js and set a specific option as selected

When iterating through a list of objects, I am struggling to set the status of each object as selected by default. <template> <table class="table is-striped"> <thead> <tr> <th> ...

javascriptfor-loopvue.js

Enhancing Your Website with Interactive Highlighting Tags

Looking at the following html: Let's see if we can <highlight data-id="10" data-comment="1"> focus on this part only </highlight> and ignore the rest My goal is to emphasize only the highlight section. I know how to emphasize a span ...

javascripthtmlcsstags

Exploring the Response Object in Express JS: A Comprehensive Guide

I'm currently using Express version 4.13.4. My goal is to access and examine the res object. However, when I try to use console.log() on it, the output is too lengthy to display properly in a command window. I attempted to utilize jsonfile to save i ...

javascriptjsonexpress

Function in jQuery to reference two different divs

I'm currently facing an issue with a code snippet that I have. The requirement is for the user to be able to hover over "Div 1" and/or "Div2" and trigger a red border around both elements simultaneously. Due to the complexity of my WordPress theme, th ...

javascriptjqueryhtmlcss

I kindly request your assistance in resolving the issues with the append() and empty

Here is some code I've been working on: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ ...

javascriptjqueryhtml

JavaScript's replace() method and the $1 issue

My goal is to develop a script that can identify specific patterns within text and then enclose them in particular tags upon identification. $(".shop_attributes td").each(function () { $(this).html(function(i, html) { return html.replace(/E[0- ...

javascriptregex

What is the best way to activate a function within an npm package in a Vue application?

I'm just starting out with Vuejs and I've recently installed the vue-countup-v2 npm package. I successfully imported it into my Vue component and noticed that it works perfectly when the page loads. However, I am interested in triggering the Coun ...

javascriptvue.jsnpmwebpackvue-component