CSS Animation Jump Issue on Mobile

Question

So I have an issues on mobile view for this accordion I made.

Once you have clicked through the menu and to the main content when you select between the different elements there is slight jump before the animation runs.

I can't figure out why it would be doing this or if it could be something to do with the animation timings I have used, so any suggestions would be welcome.

The easiest way to see what I have done is on the CodePen link below.

CodePen Link: https://codepen.io/nickelse/full/dypEyMK

Video of Issue: https://www.loom.com/share/cd1280d898d64b58abbfc1d7ce1fc824

html {
    box-sizing: border-box; 
    font-size: 62.5%;
    -webkit-overflow-scrolling: touch;
}
    
*, *:before, *:after { box-sizing: inherit; }

body {
    background: #222;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

img {
    height: auto;
    max-width: 100%;
    width: 100%;
}

.hozacc__wrapper {
    display: flex;
    overflow: hidden;
}

.hozacc__box {
    align-items: center;
    box-shadow: 0 5px 10px black;
    cursor: pointer;
    display: flex;
    position: relative;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
    transform-origin: center;
    width: 25%;
}

.hozacc__content--wrapper {
    color: white;
    display: none;
    font-weight: 300;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.hozacc__content--container {
    align-items: center;
    display: flex;
}

.hozacc__box--one { 
    background: url('https://images.pexels.com/photos/3421920/pexels-photo-3421920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--one.hozacc__active,
.hozacc__box--one.hozacc__inactive { 
    background: #0075BF; 
}

.hozacc__box--two { 
    background: url('https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--two.hozacc__active,
.hozacc__box--two.hozacc__inactive { 
    background: #469535; 
}

.hozacc__box--three { 
    background: url('https://images.pexels.com/photos/3421920/pexels-photo-3421920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--three.hozacc__active,
.hozacc__box--three.hozacc__inactive { 
    background: #CE7C36; 
}

.hozacc__box--four { 
    background: url('https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--four.hozacc__active,
.hozacc__box--four.hozacc__inactive { 
    background: #CE4E4E; 
}

.hozacc__box--five { 
    background: url('https://images.pexels.com/photos/3421920/pexels-photo-3421920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--five.hozacc__active,
.hozacc__box--five.hozacc__inactive { 
    background: #007A7C; 
}

.hozacc__content--title {
    background: rgba(0,0,0,.6);
    border: 4px solid white;
    color: white;
  left: 50%;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all .2s;
}

.hozacc__inactive .hozacc__content--title {
  background: none;
    border: none;
    transform: translate(-50%,-50%) rotate(-90deg);
}

.hozacc__content--title h1 {
    font-weight: 700;
}

.hozacc__active {
    width: 100%;
}

.hozacc__active .hozacc__content--title {
    display: none;
}

.hozacc__fadein {
    animation: hozaccFadeIn ease .9s;
    display: block;
}

@keyframes hozaccFadeIn {
  0% { 
        opacity: 0; 
    }
    
    50% { 
        opacity: 0; 
    }
    
  100% { 
        opacity: 1; 
    }
}




@media only screen and (max-width: 779px) {
    
    .hozacc__flexy {
        flex-wrap: wrap;
    }

    .hozacc__wrapper {
        height: 500px;
    }
    
    .hozacc__box {
        flex-basis: 50%;
        max-width: 50%;
  }

  .hozacc__content--wrapper {
    font-size: 14px;
    }

    .hozacc__content--container {
        flex-wrap: wrap;
    }

    .hozacc__content--copy {
        flex-basis: 100%;
        max-width: 100%;
        order: 2;
        padding-left: 20px;
        padding-right: 20px;
    } 
    
    .hozacc__content--copy h2 {
        font-size: 18px;
    }

    .hozacc__content--img {
        flex-basis: 100%;
        max-width: 100%;
        order: 1;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hozacc__content--img img {
        border: 2px solid white;
        box-sizing: border-box;
        padding: 10px;
    }

    .hozacc__content--title {
/*      transform: translate(-50%,-50%) rotate(-90deg); */
        transform: translate(-50%,-50%);
    }
    
    .hozacc__inactive .hozacc__content--title {
        white-space: nowrap;
    }

    .hozacc__content--title h1 {
        font-size: 16px;
    }
    
    .hozacc__inactive {
        flex-basis: 100px;
        max-width: 100px;
    }
    
    .hozacc__active {
        flex-basis: 100%;
        max-width: 100%; 
    }
    
}




@media only screen and (min-width: 780px) {
    
    .hozacc__wrapper {
        height: 600px;
    }

    .hozacc__content--wrapper {
        font-size: 18px;
    }

    .hozacc__content--copy {
        flex-basis: 40%;
        max-width: 40%;
        padding-left: 40px;
        padding-right: 40px;
    }

    .hozacc__content--img {
        flex-basis: 60%;
        max-width: 60%;
    }

    .hozacc__content--title {
        transform: translate(-50%,-50%);
        white-space: nowrap;
    }    

/*  .hozacc__inactive .hozacc__content--title {
        transform: translate(-50%,-50%) rotate(-90deg);
    } */

    .hozacc__content--title h1 {
        font-size: 20px;
    }

    .hozacc__inactive {
        width: 70px;
    }
    
}

question from:https://stackoverflow.com/questions/65899261/css-animation-jump-issue-on-mobile

Answer 1

The jumping issue is because of your with values between the active and the inactive states. In following example where you can run the code i only changed the values for the active item and it solved the issue on mobile. Use more accurate width and max-width values with calculating the max-width for the sections in every state.

$('.hozacc__box').click(function(hozaccStuffs) {
    $('.hozacc__wrapper').removeClass('hozacc__flexy');
    
    $(this)
        .addClass('hozacc__active')
        .removeClass('hozacc__inactive')
        .find('.hozacc__content--wrapper')
        .addClass('hozacc__fadein');
        
    $(this)
        .siblings()
        .addClass('hozacc__inactive')
        .removeClass('hozacc__active')
        .find('.hozacc__content--wrapper')
        .removeClass('hozacc__fadein'); 
});

//

html {
    box-sizing: border-box; 
    font-size: 62.5%;
    -webkit-overflow-scrolling: touch;
}
    
*, *:before, *:after { box-sizing: inherit; }

body {
    background: #222;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

img {
    height: auto;
    max-width: 100%;
    width: 100%;
}

.hozacc__wrapper {
    display: flex;
    overflow: hidden;
}

.hozacc__box {
    align-items: center;
    box-shadow: 0 5px 10px black;
    cursor: pointer;
    display: flex;
    position: relative;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
    transform-origin: center;
    width: 25%;
}

.hozacc__content--wrapper {
    color: white;
    display: none;
    font-weight: 300;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.hozacc__content--container {
    align-items: center;
    display: flex;
}

.hozacc__box--one { 
    background: url('https://images.pexels.com/photos/3421920/pexels-photo-3421920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--one.hozacc__active,
.hozacc__box--one.hozacc__inactive { 
    background: #0075BF; 
}

.hozacc__box--two { 
    background: url('https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--two.hozacc__active,
.hozacc__box--two.hozacc__inactive { 
    background: #469535; 
}

.hozacc__box--three { 
    background: url('https://images.pexels.com/photos/3421920/pexels-photo-3421920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--three.hozacc__active,
.hozacc__box--three.hozacc__inactive { 
    background: #CE7C36; 
}

.hozacc__box--four { 
    background: url('https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--four.hozacc__active,
.hozacc__box--four.hozacc__inactive { 
    background: #CE4E4E; 
}

.hozacc__box--five { 
    background: url('https://images.pexels.com/photos/3421920/pexels-photo-3421920.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-position: cover;
}

.hozacc__box--five.hozacc__active,
.hozacc__box--five.hozacc__inactive { 
    background: #007A7C; 
}

.hozacc__content--title {
    background: rgba(0,0,0,.6);
    border: 4px solid white;
    color: white;
  left: 50%;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all .2s;
}

.hozacc__inactive .hozacc__content--title {
  background: none;
    border: none;
    transform: translate(-50%,-50%) rotate(-90deg);
}

.hozacc__content--title h1 {
    font-weight: 700;
}

.hozacc__active {
    width: 100%;
}

.hozacc__active .hozacc__content--title {
    display: none;
}

.hozacc__fadein {
    animation: hozaccFadeIn ease .9s;
    display: block;
}

@keyframes hozaccFadeIn {
  0% { 
        opacity: 0; 
    }
    
    50% { 
        opacity: 0; 
    }
    
  100% { 
        opacity: 1; 
    }
}




@media only screen and (max-width: 779px) {
    
    .hozacc__flexy {
        flex-wrap: wrap;
    }

    .hozacc__wrapper {
        height: 500px;
    }
    
    .hozacc__box {
        flex-basis: 50%;
        max-width: 50%;
  }

  .hozacc__content--wrapper {
    font-size: 14px;
    }

    .hozacc__content--container {
        flex-wrap: wrap;
    }

    .hozacc__content--copy {
        flex-basis: 100%;
        max-width: 100%;
        order: 2;
        padding-left: 20px;
        padding-right: 20px;
    } 
    
    .hozacc__content--copy h2 {
        font-size: 18px;
    }

    .hozacc__content--img {
        flex-basis: 100%;
        max-width: 100%;
        order: 1;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hozacc__content--img img {
        border: 2px solid white;
        box-sizing: border-box;
        padding: 10px;
    }

    .hozacc__content--title {
/*      transform: translate(-50%,-50%) rotate(-90deg); */
        transform: translate(-50%,-50%);
    }
    
    .hozacc__inactive .hozacc__content--title {
        white-space: nowrap;
    }

    .hozacc__content--title h1 {
        font-size: 16px;
    }
    
    .hozacc__inactive {
        flex-basis: 100px;
        max-width: 100px;
    }
    
    .hozacc__active {
        flex-basis: calc(100% - 300px);
        max-width: calc(100% - 300px);
    }
    
}




@media only screen and (min-width: 780px) {
    
    .hozacc__wrapper {
        height: 600px;
    }

    .hozacc__content--wrapper {
        font-size: 18px;
    }

    .hozacc__content--copy {
        flex-basis: 40%;
        max-width: 40%;
        padding-left: 40px;
        padding-right: 40px;
    }

    .hozacc__content--img {
        flex-basis: 60%;
        max-width: 60%;
    }

    .hozacc__content--title {
        transform: translate(-50%,-50%);
        white-space: nowrap;
    }    

/*  .hozacc__inactive .hozacc__content--title {
        transform: translate(-50%,-50%) rotate(-90deg);
    } */

    .hozacc__content--title h1 {
        font-size: 20px;
    }

    .hozacc__inactive {
        width: 70px;
    }
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
<section class="hozacc__wrapper hozacc__flexy">
    <div class="hozacc__box hozacc__box--one">
        <div class="hozacc__content--title">
            <h1>Content Box One</h1>
        </div><!-- /.hozacc__content--title -->
        
        <div class="hozacc__content--wrapper">
            <div class="hozacc__content--container">
                <div class="hozacc__content--copy">
                    <h2>Content Box One</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas quaerat commodi error architecto laudantium et asperiores dicta, porro iste vitae laborum, perferendis! Ea ipsum molestias, aliquid consequatur minus neque praesentium.</p>
                </div><!-- /.hozacc__content--copy -->
            
                <div class="hozacc__content--img">
                    <img src="https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                </div><!-- /.hozacc__content--img -->
            </div><!-- /.hozacc__content--container -->
        </div><!-- /.hozacc__content--wrapper -->
    </div><!-- /.hozacc__box .hozacc__box--one -->
    
    
    <div class="hozacc__box hozacc__box--two">
        <div class="hozacc__content--title">
            <h1>Content Box Two</h1>
        </div><!-- /.hozacc__content--title -->
        
        <div class="hozacc__content--wrapper">
            <div class="hozacc__content--container">
                <div class="hozacc__content--copy">
                    <h2>Content Box Two</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas quaerat commodi error architecto laudantium et asperiores dicta, porro iste vitae laborum, perferendis! Ea ipsum molestias, aliquid consequatur minus neque praesentium.</p>
                </div><!-- /.hozacc__content--copy -->
            
                <div class="hozacc__content--img">
                    <img src="https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                </div><!-- /.hozacc__content--img -->
            </div><!-- /.hozacc__content--container -->
        </div><!-- /.hozacc__content--wrapper -->
    </div><!-- /.hozacc__box .hozacc__box--two -->
    
    
    <div class="hozacc__box hozacc__box--three">
        <div class="hozacc__content--title">
            <h1>Content Box Three</h1>
        </div><!-- /.hozacc__content--title -->
        
        <div class="hozacc__content--wrapper">
            <div class="hozacc__content--container">
                <div class="hozacc__content--copy">
                    <h2>Content Box Three</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas quaerat commodi error architecto laudantium et asperiores dicta, porro iste vitae laborum, perferendis! Ea ipsum molestias, aliquid consequatur minus neque praesentium.</p>
                </div><!-- /.hozacc__content--copy -->
            
                <div class="hozacc__content--img">
                    <img src="https://images.pexels.com/photos/940035/pexels-photo-940035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
                </div><!-- /.hozacc__content--img -->
            </div><!-- /.hozacc__content--container -->
        </div><!-- /.hozacc__content--wrapper -->
    </div><!-- /.hozacc__box .hozacc__box--three -->

    
    <div class="hozacc__box hozacc__box--four">
        <div class="hozacc__content--title">
            <h1>Content Box Four</h1>
        </div><!-- /.hozacc__content--title -->
        
        <div class="hozacc__content--wrapper">
            <div class="hozacc__content--container">
                <div class="hozacc__content--copy">
                    <h2>Content Box Four</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas quaerat commodi error architecto laudantium et asperiores dicta, porro iste vitae laborum, perferendis! Ea ipsum molestias, aliquid consequatur minus neque praesentium.</p>
                </div><!-- /