CSS translate3d performance problems on mobile devices with big DOM

Question

I'm using OwlCarousel 1.3.3 on a website pretty much like the sync example from the owl website ( http://owlgraphic.com/owlcarousel/demos/one.html ):

var owlconfig = {
  singleItem: true,
  navigation: false,
  pagination: false,
  afterAction: syncCarousels
};


$('.image-gallery').owlCarousel(owlconfig);

The syncCarousels doesn't have any magic in it and it doesn't cause the lag, because it's still happening when I take that method out.

The HTML of the carousel (after initialising the JS):

<div class="image-gallery owl-carousel owl-theme">
  <div class="owl-wrapper-outer">
    <div class="owl-wrapper">
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
    </div>
</div>

In the desktop version, everything works fine, but if I test it on an iPhone or iPad, the swipe feels extremely laggy. On DragEnd, it stops for like 500ms, before anything happens.

The page where the carousel is embedded has a lot of difference html markup, text and images basically. If I remove some of that markup, the owlCarousel performance improves, but thats not a solution.

How could the performance be improved? Event the "noSupport3d" option of owl which uses jQuery animate performs better.

Answer 1

Okay, I figured it out, here's the solution for everyone stumbling upon a similar problem:

A big amount of DOM elements affect the performance of transitions, that's why the slider worked perfectly in a lightweight html page but had performance issues in a bigger page.

What I did now to increase performance of my slider was adding transform: translateZ(0px) to the parent element of the one being translated.

Attention : Using translate3D does not make this code redundant. I'm now using translate3D for the sliding effect AND translateZ(0px) for the parent container of the sliding one - this did the trick.