The issue of CSS translate3d causing performance slowdowns on mobile devices with large DOM structures

I have implemented OwlCarousel 1.3.3 on a website, similar to the sync example shown on the official owl website ():

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

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

The function syncCarousels does not contain any problematic code causing lag, as the issue still persists even without using it.

Below is the HTML structure of the carousel after initializing the JS:

<div class="image-gallery owl-carousel owl-theme">
  <div class="owl-wrapper-outer">
    <div class="owl-wrapper">
        ... (carousel item markup here)
    </div>
</div>

In the desktop view, everything functions smoothly. However, when testing on an iPhone or iPad, there is a noticeable lag while swiping. The swipe action delays for about 500ms before registering.

The page where the carousel exists contains various HTML elements, texts, and images. Removing some of these elements improves the performance of the owlCarousel, but this is not a sustainable solution.

How can the performance of the carousel be enhanced? Even the "noSupport3d" option in OwlCarousel, utilizing jQuery animate, shows better performance.

javascriptjquerycssowl-carousel

Answer №1

After some investigation, I have found a solution that may help others facing the same issue:

The performance of transitions can be affected by a large number of DOM elements, which is why my slider worked well on a simple HTML page but struggled on a larger one.

To improve the performance of my slider, I added transform: translateZ(0px) to the parent element of the one being translated.

Note: Using translate3D alongside translateZ(0px) is still necessary. By using both for the sliding effect and the parent container, I was able to resolve the performance issues.

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

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

javascript.netangulartypescriptclass

Is there a way to fetch a file using the fs readFile function in node.js without explicitly stating the file name?

I'm currently facing a challenge in retrieving a file from the file system to send it via API to the client. I am using Express.js for my backend and utilizing the 'fs' library. My goal is to achieve this without explicitly specifying the fi ...

javascriptnode.jsexpress

Attempting to retrieve an element by its ID from a div that was dynamically loaded using AJAX

I am having trouble retrieving the value of an element with getElementById from a div that is loaded via ajax. Let me explain: In 'example.php' I have the following JavaScript code: <script type= "text/javascript"> var page=document.getE ...

phpjavascriptjqueryhtmlajax

What is the best way to change the value of a div using JavaScript?

i could really use some assistance, i am trying to ensure that only the selected template is shown on the screen, while all others are hidden. The expected outcome should be to replace the values of: <div class="city">City<span>,< ...

javascripthtmlfunction

Div content is refreshed by AJAX request just once

This is my first time using AJAX and I have run into a specific issue. I currently have a description displayed, and below it is a field with a button where I can input a new description. When I click the button, I want to refresh only the description usi ...

javascriptjqueryruby-on-railsajax

Error: Invalid Request - Nodejs Request Method

As part of my project involving payment gateway integration, I needed to make a call to the orders api. However, I encountered an error message: {"error":{"code":"BAD_REQUEST_ERROR","description":"Please provide your api key for authentication purposes."} ...

javascriptnode.jsexpressgoogle-cloud-functionsrazorpay

Submit JSON data that is not empty in the form of a custom format within the query string

Attempting to transmit JSON data using a GET request. JSON data: var data = { country: { name: "name", code: 1 }, department: {}, cars: ["bmw", "ferrari"], books: [] } Code for sending: var posting = $.ajax({ ur ...

javascriptjqueryajaxjson

Tips for transforming a string into an object using AngularJS

Here is a string I'm working with: $scope.text = '"{\"firstName\":\"John\",\"age\":454 }"'; I am trying to convert it into a JavaScript object: $scope.tmp = {"firstName":"John","age":454 }; Please note: J ...

javascriptangularjsjsonobjectconverters

Sending a string parameter from an AJAX function to a Spring controller

I'm currently developing a standalone application and facing an issue with passing a string, which is generated from the change event, to the spring controller using the provided code snippet. Here is the HTML CODE snippet: <!DOCTYPE HTML> < ...

javascriptjavaajaxspring-bootspring-mvc

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

javascriptcss

Is there a way to insert the array name into my Json response?

Within my controller, I have implemented the following code to generate a Json response each time a specific URL is accessed. public JsonResult LatLng() { var zones = zoneRepository.GetCoordinates().ToList(); return Json(zones, Js ...

jqueryasp.net-mvcjson

Fade-In Effect for CSS Background Image

I'm currently learning CSS and I am trying to create an effect where, on hover over some text, the text disappears and an image fades in. I have been experimenting with different methods but haven't quite achieved the desired outcome. The text i ...

htmlcsshover

using only css, create a centralized navigation bar without a fixed width

I managed to create a nav bar in the center (check out the link below), but for some reason there is a slight 2-3 pixel gap between each navigation element. Even though I have set both Margin and Padding to 0, the issue persists and I am unable to solve it ...

htmlcss

Tips for finding and showcasing content from a JSON file in an HTML format

A list of project names is being displayed in the side bar by retrieving them from a JSON result. When a user clicks on any of the listed project names on the side bar, it will show the details of that specific project. Additionally, there is now a search ...

javascriptjqueryhtmlcss

checkbox revision

I'm attempting to update some text indicating whether or not a checkbox is checked. The issue is that when the checkbox is checked, the textbox disappears and the text takes its place. <form name="myForm" id="myForm"> <input type="checkb ...

javascriptforms

Enhancing user engagement with PDF files using AngularJS to create an interactive and captivating page-turn

Anyone familiar with how to achieve a page turner effect for PDF files using Angular? I'm open to jQuery solutions as well. I've come across turn.js, which uses HTML, but I'm specifically looking for a way to implement this effect with PDF f ...

javascriptjqueryangularjs

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

Upon deploying my site to Netlify or Vercel, I encountered a strange error. The project runs smoothly on my computer but seems to have issues when deployed. I am using TypeScript with Next.js and even attempted renaming folders to lowercase. Feel free to ...

javascriptreactjstypescriptwebpacknext.js

Are there any portable stylus options available?

Hey there! I'm dealing with a situation where the computers at my school are locked down and I can't install software. Does anyone know if there's a way to compile my Stylus code without having to install Node first? Or perhaps, is there a p ...

cssnode.jsportabilitystylus

Determining the presence of a username in the jQuery Database

Could someone assist me with checking if a username is already in use? I have a script that currently outputs "undefined". Any help would be greatly appreciated! :) Here's the jQuery code snippet - $("#registerusername").val() contains the value of a ...

phpjqueryjson

Sending a Php request using AJAX and receiving JSON values

Trying to retrieve values from PHP using AJAX Post. I've researched and found that JSON dataType should be used, but encountering an error: "SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 72 of the JSON d ...

phpjqueryarraysjsonajax