What determines the smoothness of sites? I mean different effects of the appearance of the menu, sliders, scrolls, and so on. I made a menu, on the PC I check everything is fine, smooth, beautiful. But, when it comes to checking on the mob. devices I feel ashamed. All jerking, twitching, it is unclear how it shifts and so. Even the usual scroll tupit.

Tell me how to properly make a smooth layout, on what it depends (css properties and etc.), what are the pitfalls?

PS Example of my menu

$('.trigger-menu').on('click', function () { $('body').toggleClass('menu-open'); }); $('.bg').on('click', function () { $("#mobile-menu-trigger:checked,.menu-inner-trigger:checked").prop("checked", false).change(); $('body').toggleClass('menu-open'); }); 
 ul, li { list-style: none; margin: 0; padding: 0; } .container { width: 500px; height: auto; margin: auto; padding: 15px; overflow: hidden; border: 1px solid lightgrey; position: relative; height: 300px; } .mobile-menu { width: 80%; max-width: 300px; position: absolute; top: 0; right: auto; bottom: 0; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; -webkit-transform: translate3d(-102%, 0, 0); transform: translate3d(-102%, 0, 0); left: 0; z-index: 5; box-shadow: 3px 0 4px lightgrey; } .mobile-menu__header { width: 100%; padding: 10px 0; border-bottom: 1px solid #ff4081; background: #fff; } .mobile-menu__logo-wrapper { width: 150px; margin: 0 auto; } .mobile-menu__list { width: 100%; height: 100%; } .mobile-menu__item { border-bottom: 1px solid lightgrey; } .mobile-menu__link { padding: 5px; display: block; } .mobile-menu__inner { background: #f78a8a; width: 100%; position: absolute; top: 0; left: 0; right: auto; bottom: 0; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } #mobile-menu-trigger:checked + .mobile-menu { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } input[data-menu="menu"]:checked + .mobile-menu__inner { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .display-hidden { display: none; } .trigger-menu { background: #91a2f7; float: right; } .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.8); z-index: 1; visibility: hidden; opacity: 0; transition: all 0.3s; } .menu-open .bg { opacity: 1; visibility: visible; } .logo { width: 100%; height: auto; } .menu-back-trigger { border-bottom: 1px solid #ff4081; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <label class="trigger-menu" for="mobile-menu-trigger">Trigger</label> <input id="mobile-menu-trigger" class="display-hidden" type="checkbox"> <nav class="mobile-menu"> <header class="mobile-menu__header"> <div class="mobile-menu__logo-wrapper"> <img class="logo" src="http://placehold.it/150x30"> </div> </header> <ul class="mobile-menu__list"> <li class="mobile-menu__item"> <label class="mobile-menu__link" for="menu-inner-trigger-1">Category</label> <input id="menu-inner-trigger-1" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu"> <div class="mobile-menu__inner"> <label class="mobile-menu__link menu-back-trigger" for="menu-inner-trigger-1">Category</label> <ul class="mobile-menu__inner-list"> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category2 </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category3 </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category4 </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category5 </a> </li> </ul> </div> </li> <li class="mobile-menu__item"> <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label> <input id="menu-inner-trigger-2" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu"> <div class="mobile-menu__inner"> <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label> <ul class="mobile-menu__inner-list"> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category2 </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category3 </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category4 </a> </li> <li class="mobile-menu__inner-item"> <a href="#" class="mobile-menu__link"> Inner category5 </a> </li> </ul> </div> </li> <li class="mobile-menu__item"> <a href="#" class="mobile-menu__link"> Delivery </a> </li> <li class="mobile-menu__item"> <a href="#" class="mobile-menu__link"> About </a> </li> </ul> </nav> <div class="bg"></div>

  • Can the phone be weak? - Jean-Claude
  • @ Jean-Claude, My BB Z10 may be weak, although it’s unlikely that there’s a problem in the browser, although it’s smaller in other browsers, but it’s the same problem. But in the iPhone 6 and 6s there is the same trouble, but on a smaller scale - E_K

3 answers 3

In this very easy task, like a pull-down menu, the implementation is too complicated. You simply overload the browser with unnecessary work, neither you nor him. Why translate3d , if you are working with the cleanest 2D? I looked briefly, but probably the nesting of tags does not take into account the layers for drawing by the browser, and they, in turn, are poorly defined by css properties. I advise you to skip online about how the browser draws animation, what is better to use transition or animation and in what cases. Even if the effect is the same, often two different properties have an unequal mark on performance. I have an example: I tried to make a shadow on a gradient element. The fact is that the text-shadow is drawn over the gradient ( background-color: linear-gradient ). And this can be circumvented in two ways: in the main tag, draw a shadow with the help of text-shadow , and in a pseudo text-shadow , draw a gradient text. I chose this option, now I will tell you why. Or use filter: drop-shadow . And here a logical question arises, by simple internal logic it is understandable, because to draw a simple shadow, I would not like to use a filter. Why? If you still use transform: scale , then the browser every frame of this scale will draw a new filter. And it is expensive and actually on my stationary computer, in Chrome, such an appearance began to stumble, although the animation went 80ms , that is, faster than the average human 80ms . So the conclusion is this: you need to draw in your head and understand how the browser draws it, not to use advanced features in the direction of their power, but look at simple but effective css-properties in combination.

  • Please explain what you mean by "I looked at it briefly, but probably the nesting of tags does not take into account the layers for drawing by the browser, and they, in turn, are poorly defined by css properties." - E_K
  • @ AFI19, the fact is that the browser sometimes needs to draw all the other elements before it can render the nested element. The less nesting, the better for animation. Next, I advised to learn about browser rendering of content and animation in particular, this is it. - VostokSisters

The question is too general, since it may depend on the algorithm used in the animation (for example, a movement of 1000 iterations 1 pixel will be more than 2 times worse in time and CPU resources than a movement of 500 iterations 2 pixels each), clock processor frequency (it is usually lower in mobile devices), even the frequency of a video card and even a specific engine that processes JS \ CSS (it is different in different browsers, although there seems to be a consensus in this regard among browser manufacturers)

    Your menu is too complicated. Make nesting less. Give up the list. Make nav and in it a . Also update jQuery to 3.1.1