The CSS3 animations using transit do not occur at the same time in Internet Explorer and Firefox

I am currently developing a presentation library to simplify my work. Naturally, animations play a significant role in this project.

The library leverages Transit for smooth CSS3 animations. One specific animation involves an element sliding into or out of the presentation. When two of these animations are combined (one entering, one exiting), it creates a visually appealing slide transition effect. You can view a demo here (use arrow keys or click to navigate through the presentation).

While Chrome displays the effect seamlessly without a noticeable gap between the slides, it distorts text during transitions. Therefore, I am considering using Firefox or IE for actual presentations as they anti-alias text nicely. However, both Firefox and IE introduce a gap between the slides as if they were slightly out of sync.

Upon logging the start times using Date.now() for each animation, there was a small time difference between Chrome (4ms) and Firefox (3ms). Although some overhead can be attributed to creating the Date object, optimization is still ongoing. Despite Chrome showing a larger time gap, it is Firefox that exhibits the animation gap.

Is there a solution to this issue? Could it be related to my implementation (available on Github), or is it a Transit-related problem (repository on Github)? If no straightforward solution exists, I could consider using Tram.js, although I prefer to stick with Transit initially despite its slight clunkiness.

Any insights into this matter would be greatly appreciated. I have refrained from sharing specific code on this page as the issue could stem from various sources, hence displaying the entire library for reference.

Answer №1

Upon further inspection during debugging, I noticed that the ease function is currently configured as

  easeInOutCubic: "cubic-bezier(.645,.045,.355,1)"

I suspect that the issue stems from this configuration, and to ensure both animations are perfectly synchronized, it is advisable to opt for a linear easing function.

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

Assigning values from JSON data in jQuery

I'm facing an issue with a php query that outputs json containing a single value. The json data format is as follows: {"value":53}. I've been attempting to set this value as a variable in a jquery function, but have not been successful so far des ...

Preserving client-side page state during page reloads in angular.js apps

I am currently developing a Single Page application using angular.js and I have encountered an issue that I am struggling to resolve. When performing a full page refresh in an angular app, how can we verify if the user still has a valid session? While Sta ...

How can we incorporate Django template tags into our jQuery/JavaScript code?

Is it possible to incorporate Django's template tags within JavaScript code? For example, utilizing {% form.as_p %} in jQuery to dynamically inject forms onto the webpage. ...

Eliminate the need for jQuery when performing basic text rotation operations

Currently, I find myself loading an entire jQuery library for a task that could be achieved with much simpler code. The task involves cycling through a list of text spans to display different messages each time. Below is the existing code: (function($) ...

Tips for transferring information obtained from an API to my custom HTML page

As a novice in web development, I recently created a simple weather report website using the OpenWeather API. While I successfully fetched data from the API, I encountered an issue trying to display this data on my HTML page. Despite utilizing DOM manipu ...

The proper approach is using CSS for linking pseudo-classes

Look what I stumbled upon: Important: Remember, a:hover MUST be placed after a:link and a:visited in the CSS code to work properly!! Remember: Place a:active after a:hover for it to have an effect in the CSS code!! Note: Pseudo-class names are not case- ...

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

The formatting of dates and times may differ between Internet Explorer 10 and Chrome web

When using a web API controller and returning a date object without formatting, the data collection may appear as shown below: public IEnumerable<Event> GetData() { return new NORTHWNDEntities().Events.ToList(); } On the client side ...

jquery datatable row location in terms of height

Utilizing the jQuery datatable for displaying and editing data on my website has been a useful tool, however, I have encountered a small issue when it comes to editing values in the columns. Whenever I click the edit button on a row, the datatable jumps sl ...

Tips for avoiding incorrect data entry in input fields

Is there a way to prevent the input type number from having an undefined value? For instance, like shown in the image below: https://i.sstatic.net/z1pZH.png Any ideas on how to restrict the input to only accept plus or minus values? ...

What exactly is the role of the @altfontfamily variable in Bootstrap?

Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...

Looking to empty a textbox, give it focus, and avoid triggering an ASP.NET postback all with a single click of a

I am working on an ASP.NET project and I have a simple HTML button. When this button is clicked, my goal is to clear textbox1, set the focus on textbox1, and prevent any postback from occurring. However, I am running into an issue where preventing postba ...

Sending data to another page by selecting a list item

Being new to web programming and JavaScript, I am facing a scenario where I have a list of requests displayed on one page and I need to pass the ID of the selected request to another page to display all the details of that particular request. I am strugg ...

Show a pop-up form when a user focuses on it using React

Hello, I have been looking for a way to create an overlay with a form that appears when a specific input field is clicked. I am trying to achieve this using React. Can someone please advise me on how to accomplish this? Here is my code import React, { Co ...

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

I've come across this same question multiple times, but the solutions I've found so far haven't been helpful. My media queries are working perfectly on desktop, but they don't seem to take effect on three different android devices. It&a ...

What is the best way to combine two JSON objects?

Item A: var item1 = { "roleid": "001", "techid": "001", "role": "WEB DEVELOPER", "tech": "JAVASCRIPT", "experience": [], "certifications": [], "gender": ["Male"], "awards": [], "min_experience_years": "4", "max_expe ...

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

Having issues with passing data correctly in a jQuery AJAX PHP login system

I am encountering a Failure object Object notification. Despite reviewing various examples, I am unable to pinpoint the error. My suspicion is that my AJAX setup is not configured correctly. The PHP code seems to be in order as it interacts with a local da ...

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...