1
\$\begingroup\$

I am making a webapp that needs a division to expand on click. (The division is loaded with content, so it was likely to not animate very well, but I increased the animation time to 1s to make it look smooth) I assigned an event on it and it works absolutely fine in chrome, without hitch or flicker, but in firefox and internet explorer, these issues are there. Here is my JS function to implement this:

$activeId = '';
$hider = function($ID) {
    if ($activeId.length) {
        $shower($activeId)
    };
    $activeId = $ID;
    $('#' + $ID).css('opacity', '0');
    $('#' + $ID).css('visibility', 'hidden');
    $('#' + $ID + '-main-div').animate({
        height: '900px'
    }, 1000);
    $('#' + $ID + "-btn").css('visibility', 'visible');
    $('#' + $ID + "-floating-closer").addClass('animate')
};
$shower = function($ID) {
    $('#' + $ID).css('opacity', '1');
    $('#' + $ID).css('visibility', 'visible');
    $('#' + $ID + '-main-div').animate({
        height: '260px'
    }, 800);
    $('#' + $ID + "-btn").css('visibility', 'hidden');
    $('#' + $ID + "-floating-closer").removeClass('animate');
    $activeId = ''
};

The division that expands has these CSS properties:

.row-container{
  height: 260px;
}

After performing manual removal of elements, I have noticed that the animation affecting the overall performance is this:

$('#' + $ID + '-main-div').animate({
        height: '900px'
    }, 1000);

Kindly note that the code works absolutely fine on Chrome, it also works on Firefox and IE as well, but with very low performance. Is there a better practice to make to the animation smoother on Firefox and IE as well?

Update: The code snippet has been posted. Kindly go through it please. Also, notice that adding the animation square-animation to the .row-container in CSS makes the animation smooth in Firefox. I read that it forces hardware acceleration for animating CSS. The performance issue persists in IE.

$activeId = '';
$hider = function($ID) {
    if ($activeId.length) {
        $shower($activeId)
    };
    $activeId = $ID;
    $('#' + $ID).css('opacity', '0');
    $('#' + $ID).css('visibility', 'hidden');
    $('#' + $ID + '-main-div').animate({
        height: '850px'
    }, 1000);
    $('#' + $ID + "-btn").css('visibility', 'visible');
    $('#' + $ID + "-floating-closer").addClass('animate')
};
$shower = function($ID) {
    $('#' + $ID).css('opacity', '1');
    $('#' + $ID).css('visibility', 'visible');
    $('#' + $ID + '-main-div').animate({
        height: '260px'
    }, 800);
    $('#' + $ID + "-btn").css('visibility', 'hidden');
    $('#' + $ID + "-floating-closer").removeClass('animate');
    $activeId = ''
};
ul {
    margin: 0;
    padding: 0;
  }
  
  .row-container{
    height: 260px;
    /* animation: square-animation 5s infinite; */
  }
  
 
  @keyframes square-animation {
    0%, 100% {
      transform: rotate(0.01deg);
      -ms-transform: rotate(0.01deg);
      -webkit-transform: rotate(0.01deg);
      -moz-transform: rotate(0.01deg);
      -o-transform: rotate(0.01deg);
    }
    50% {
        transform: rotate(0.01deg);
        -ms-transform: rotate(0.01deg);
        -webkit-transform: rotate(0.01deg);
        -moz-transform: rotate(0.01deg);
        -o-transform: rotate(0.01deg);
    }
  }
  
  .cat-child{
    position: absolute;
    width: 100%;
    top: 0; 
    left: 0; 
    z-index: 100;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.75), rgba(0,0,0,0.9));
    vertical-align: middle;
    visibility: visible;
    transition: all 1s;
  }
  
  .cat-button{
    position: absolute;
    z-index: 90;
    width: 100%;
    height: 50px;
    bottom: 0;
  }
  
  .floating-closer{
    position: absolute;
    z-index: 90;
    border-radius: 50%;
    background: #FFF;
    color: black;
    font-size: 1rem;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    height: 56px;
    width: 56px;
    right: 15px;
    top: 15px;
    transform: scale(0);
    transition: all 0.4s;
  }
  
  .floating-closer.animate{
    transform: scale(1);
  }
  
  .sub-cat-tags{
    height: 100%;
    vertical-align: middle;
    padding-left: 7.5px;
    padding-right: 7.5px;
    margin-left: 5px;
    border-radius: 5px; 
    background: #00F;;
    font-size: 15px;
  }
  
  .navbar-toggler{
    position: absolute;
    right: 8px;
    top: 8px;
  }
<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
    <meta name="author" content="Test">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <title>
        Test | Home
    </title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
        $("window").ready(function () {
            $('li.active').removeClass('active');
            $('.home').addClass('active');
        });
    </script>
</head>

<body>
    <header class="sticky-top">
        <nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-dark">
            <div class="navbar-collapse collapse w-100 order-1 order-lg-0 dual-collapse2">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item home">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                </ul>
            </div>
            <div class="mx-auto order-0">
                <a class="navbar-brand d-flex mx-auto" href="/">Test</a>
            </div>
            <div class="navbar-collapse collapse w-100 order-lg-3 order-3 dual-collapse2">
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>
    </header>
    <div class="container-fluid text-white">
        <div class="row row-container" id="Test-main-div">
            <div class="col-12 h-100" style="overflow: hidden;">
   
                <button class="btn floating-closer" id="Test-floating-closer" onclick="$shower('Test')">
                    <span>X</span>
                </button>
                <div class="row cat-child h-100 align-items-center m-0" id="Test" onclick="$hider('Test')">
                    <div class="text-center col">
                        <h1 class="display-1">Test</h1>
                    </div>
                </div>
                <h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
                <div class="row cat-button">
                    <div class="col-12">
                        <a href="/test">
                            <button id="test-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
                                <h5>Test</h5>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row row-container" id="Test2-main-div">
            <div class="col-12 h-100" style="overflow: hidden;">
                <button class="btn floating-closer" id="Test2-floating-closer" onclick="$shower('Test2')">
                    <img src="/img/cross.svg" height="22px" width="22px" />
                </button>
                <div class="row cat-child h-100 align-items-center m-0" id="Test2" onclick="$hider('Test2')">
                    <div class="text-center col">
                        <h1 class="display-1">Test2</h1>
                    </div>
                </div>
                 <h1 class="text-dark font-weight-bold">Divisions (content heavy) that are sitting behind.</h1>
                <div class="row cat-button">
                    <div class="col-12">
                        <a href="/test2">
                            <button id="test2-btn" class="btn font-weight-bold btn-light m-0 h-100 w-100" style="visibility: hidden;">
                                <h5>Test2</h5>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

<script>$(function () { $(document).click(function (event) { $('.navbar-collapse').collapse('hide'); }); });</script>
</html>

\$\endgroup\$
  • \$\begingroup\$ You need to ask this question at stackOverflow stackoverflow.com. This is code review and we don't fix code problems. \$\endgroup\$ – Blindman67 Apr 4 '18 at 20:09
  • \$\begingroup\$ Hi @Blindman67 As I mentioned, the webapp performs flawlessly on Chrome. It also implements the functionality in firefox, but the performance of animation is ridiculous. That is why I posted it here; to get suggestions on how to boost the performance. \$\endgroup\$ – metamemelord Apr 4 '18 at 20:13
  • 1
    \$\begingroup\$ I suggest that you make a live demo by pressing Ctrl-M in the question editor. \$\endgroup\$ – 200_success Apr 4 '18 at 20:38
  • 1
    \$\begingroup\$ For the close-voters: It appears to be a performance issue, not actual broken code, so voting to not close \$\endgroup\$ – Dannnno Apr 4 '18 at 23:33
  • \$\begingroup\$ @200_success The live demo has been updated. Thanks for help! :) \$\endgroup\$ – metamemelord Apr 5 '18 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.