Chrome Browser: Issue with CSS and JavaScript transitions not functioning correctly

I have three images named img1, img2, and img3. Initially, their position is set to -50% absolute top right and left. When I change the position to static with a transition of 2s, they should move to the center.

Issue: During the transition, there is snapping occurring in some instances on Chrome (specifically on certain laptops). I am aware that something is causing the transition to break.

Below is my jQuery code snippet:


$(".middle-fixed-coming-soon-top").css({"top": "0px"});
$(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
    $(".middle-fixed-coming-soon-top").css({"position": "static"});
    // code to execute after transition ends
});

$(".middle-fixed-organics-left").css({"left": "333px"});
$(".middle-fixed-organics-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
    $(".middle-fixed-organics-left").css({"position": "static"});
    $(".middle-fixed-organics-left .for-margin").css("margin-top", "auto");
    // code to execute after transition ends
});

$(".middle-fixed-tagline-right").css({"right": "333px"});
$(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
    $(".middle-fixed-tagline-right").css({"position": "static"});
    $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto");
    // code to execute after transition ends
});

I'm new to jQuery. Can anyone provide assistance? Thank you in advance.

EDITS
This issue occurs when I reload for the second time or more.

javascriptjqueryhtmlcssgoogle-chrome

Answer №1

One major observation I have is the shift from position: absolute to position: static for an element. This causes it to change from not affecting the surrounding content to displacing everything else. I recommend using relative instead of absolute and removing the static switch completely. After that, just adjust the left/top positioning accordingly. The provided code will take care of all the JavaScript aspects, but make sure to update the CSS by changing position: absolute to position: relative.

        $(".middle-fixed-coming-soon-top").css({"top": "0px"});
        $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            // code to run after the transition completes
        });

        $(".middle-fixed-left").css({"left": "0px"});
        $(".middle-fixed-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-left .for-margin").css("margin-top", "auto");
            // code to run after the transition completes
        });

        $(".middle-fixed-tagline-right").css({"right": "0px"});
        $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto");
            // code to run after the transition completes
        });

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

Guidelines for establishing authentic headers on a SignalR connection

Can headers be set on the SignalR connection directly? I am aware of setting query string parameters but it is not secure enough for my specific scenario. var conn = ($ as any).hubConnection(); conn.url = URL; conn.qs = { "token": SECRET_KEY }; conn ...

javascriptc#typescriptsignalrsignalr.client

Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator. <Tabs defaultActiveKey="signup_renter" i ...

cssreactjsbootstrap-4tabsreact-bootstrap

When I navigate to the URL using a router-link, the v-for in my Vue.js component renders properly. However, if I manually type the URL or refresh the page, the v-for fails to render

Whenever I navigate to a specific URL that showcases icons of characters from a game, everything functions as expected and the icons are displayed. However, upon refreshing the page, the icons vanish. If I manually enter www.example.com/champions, the ico ...

javascriptvue.js

Is it possible to programmatically bind a click event to each individual word in a div element?

I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...

javascriptjqueryhtml

Proceed the flow of event propagation using the react-aria button element

In the react-aria library, event bubbling for buttons is disabled. I am facing an issue where my button, which is nested inside a div that acts as a file uploader, does not trigger the file explorer when clicked due to event bubbling being disabled. How ...

javascriptreactjstypescriptreact-aria

Collapse all Bootstrap accordions with a single click of a button

Is there a simple way to toggle the collapse/expand functionality of all accordions with just one button click? I attempted to achieve this by using a basic button that would remove the 'active' class and add it back, but unfortunately, it didn&a ...

javascripthtmlbootstrap-4

Error encountered while attempting to save process using ajax - 500 Internal Server Error

I am facing an issue with my CodeIgniter code where I encounter a 500 internal server error when trying to save data. I am not sure why this problem is happening and would appreciate any help. Below is the AJAX code in the view: function save() { $(& ...

javascriptphpjqueryajaxcodeigniter

A dynamic context menu using jQuery within AJAX-loaded content

After spending hours searching for a solution without success, I am turning to this forum for help (I have come across similar questions but none of them have solved my issue). The problem I am facing is with implementing a custom context menu on a page t ...

javascriptjqueryajaxcontextmenu

"Implementing a feature to apply the 'current' class to a div

How can I dynamically add a current class to the .navimg divs (next to li) when their parent link is clicked? Sample HTML: <div id="navbox"> <ul id="navigation"> <li id="home"><a href="#">HOME</a></li> ...

jqueryhtmlcss

Insert a new row into the table using jQuery right above the button

I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...

javascriptjqueryhtml

Is there a way to prevent Bootstrap 4's grid system from splitting column content when resizing the browser window?

Just delving into Bootstrap's grid system for the first time here, so bear with me if this sounds silly. My goal is to create a 3 column page that is responsive, featuring an image and a Spotify player in each column. Everything looks good on a full ...

htmlcssbootstrap-4

How can I prevent query string parameters from being sorted in React Router?

I'm having trouble setting a Route path with a query string using react-router. The issue is that react-router always arranges query params alphabetically, resulting in a sorted query string in the URL. For instance, on a location filter page where I ...

javascriptreactjsreact-routerquery-string

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Currently, I am utilizing ng-bootstraps datepicker to showcase user data on a daily basis. I have implemented a custom day template to apply specific CSS classes. <ng-template #customDay let-date> <div class="custom-day" [ngCla ...

cssangulartypescriptdatepickerng-bootstrap

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

I am looking for a solution in javascript that will allow the page to automatically scroll down slightly, but I also want the user to be able to interrupt this scroll. When using jquery for auto-scrolling, if the user begins manual scrolling while the ani ...

javascriptjqueryscrolluser-experience

Passing variables through a promise chain and utilizing the finally method

My current endeavor involves constructing a log for an Express API, yet I am encountering difficulties in extracting the data for logging. I have successfully logged the initial req and res objects within the finally block, but I am uncertain about how to ...

javascriptnode.jsexpresspromise

Ways to customize the selected item's color in md-select using Angular Material?

Currently, I am utilizing the dark theme in angular-material 1.0.4. The appearance of the select element is different when an item is selected: https://i.sstatic.net/FRU0r.png Comparatively, this is how it appears with the default theme applied: https:/ ...

cssangularjsmaterial-designangular-material

Encountering a 'TypeError: app.address is not a function' error while conducting Mocha API Testing

Facing an Issue After creating a basic CRUD API, I delved into writing tests using chai and chai-http. However, while running the tests using $ mocha, I encountered a problem. Upon executing the tests, I received the following error in the terminal: Ty ...

javascriptnode.jsexpressmocha.jschai

Use flex to position a div at the center of the screen

Looking for some guidance on using flex as a newbie here. Currently working on designing a website page and struggling with centering a div tag on the page using flex. Appreciate any assistance or advice you can provide. Thank you! ...

htmlcssflexbox

Position to the left with Flexbox

Currently utilizing Flex to showcase checkboxes, I have successfully met the requirements for both large and small resolutions. However, for medium resolution, the checkboxes are not functioning as anticipated. I am attempting to align all the boxes to flo ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Utilize a JavaScript variable within HTML within the confines of an if statement

On my HTML page, I am dynamically displaying a list of properties and then counting how many are displayed in each div. <script type="text/javascript> var numItems = $('.countdiv').length; </script> The class name for each property ...

javascriptjquerypythonhtmljinja2