What could be causing the lag in the animation on my mobile device?

I created a CSS animation that runs smoothly on my computer, but I noticed some jerkiness when testing it on my smartphone. Can someone explain why this is happening and suggest ways to fix it? I would like the animation to work on mobile devices as well, but if that's not possible, is there a way to disable it using a media query? 

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
  box-shadow: 5px 10px 18px #888888;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.thumbnail .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.thumbnail img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.thumbnail h3 {
  color: red;
  text-align: center;
  position: relative;
  font-size: 17px;  
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  padding: 10px;
}
.thumbnail:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  margin-bottom: 10%;
}
.thumbnail:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}
.thumbnail:hover h3,.thumbnail:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}
.container-fluid {
  padding: 60px 50px;
}
.bg-grey {
  background-color: #f6f6f6;
}
<div id="portfolio" class="container-fluid text-center bg-grey"> 
  <h2>Portfolio</h2><br>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414079:1561364425/MMNX-4954-ToSuaOceanTrench.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6352f9b"  width="400" height="300">
        
        <div class="overlay">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

    </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414077:1561364425/MMNX-4954-1280px-Calanque_de_Sormiou_5.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=c0a1b8f"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414078:1561364425/MMNX-4954-1280px-Jenny_Lake_boat_ride.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6d2bd4e"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
  </div>
</div>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

For those looking to disable animations on their mobile device, a simple solution is at hand. However, the first step should always be to optimize your code by removing any unnecessary components.

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
  box-shadow: 5px 10px 18px #888888;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.thumbnail .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.thumbnail img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.thumbnail h3 {
  color: red;
  text-align: center;
  position: relative;
  font-size: 17px;  
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  padding: 10px;
}

@media only screen and (min-width: 786px){
  .thumbnail:hover img {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(5px);
    margin-bottom: 10%;
  }
  .thumbnail:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .thumbnail:hover h3,.thumbnail:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0);
  }
}

.container-fluid {
  padding: 60px 50px;
}
.bg-grey {
  background-color: #f6f6f6;
}
<div id="portfolio" class="container-fluid text-center bg-grey"> 
  <h2>Portfolio</h2><br>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414079:1561364425/MMNX-4954-ToSuaOceanTrench.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6352f9b"  width="400" height="300">
        
        <div class="overlay">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

    </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414077:1561364425/MMNX-4954-1280px-Calanque_de_Sormiou_5.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=c0a1b8f"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414078:1561364425/MMNX-4954-1280px-Jenny_Lake_boat_ride.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6d2bd4e"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
  </div>
</div>

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

Reducing the Bootstrap Navbar Collapse Width

After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...

cssasp.nettwitter-bootstrap

If the value is negative, then subtract it from the main value using JQuery

Could someone help me figure out how to make this work in jQuery? I'm trying to accomplish this using jQuery and need some assistance. For example, if 35000 - 349990 = -314990. If it shows -314990, I want to display an error message to the user... I ...

javascriptjquery

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

Combining 2 rows in an HTML table: A step-by-step guide

Can anyone help me figure out how to merge the first row and second row of a table in HTML? I have already merged two rows, but I am having trouble merging the first and second rows together. This is how I want my rows to be merged: |-------------------- ...

htmlmergerowhtml-table

Result of mixing CSS colors

Is there a way to retrieve the result of blending two colors using the color-mix function? In cases where the color-mix feature is not supported, is it possible to set a fixed value instead? ...

csssass

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Have you ever wondered about the distinction between offsetHeight, clientHeight, and scrollHeight? What about offsetWidth, clientWidth, and scrollWidth? Understanding these differences is crucial for working effectively on the client side. Without this kn ...

javascripthtmldomoffsetheight

Using FormData to Upload Files

My challenge involves uploading a file to a Node backend that utilizes Multer for handling file uploads. Multer has specific requirements for form submission to ensure that the request.file parameter is not undefined. Despite this, I have managed to come u ...

javascriptnode.jsmulter

How to add a real-time element using Vue.js and Socket.io in an application?

As someone new to Vue.js, I'm curious about how to achieve the same functionality in Vue instead of using jQuery. With socket.io and jQuery, a <li> element is dynamically appended each time someone types something in the browser. <!doctype ...

jquerynode.jssocket.iovue.jskoa2

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

Is it true that one line arrow functions cannot include a semicolon without braces?

As someone who is new to React and ES6 syntax, I stumbled upon an interesting observation. When I wrote the following code snippet: return <input onChange={event => console.log(event.target.value);} />; I encountered a "Cannot find module" error ...

javascriptreactjsecmascript-6

Is there a way to retrieve just 6 documents with a "true" value in a specific field?

I am working with a controller that uses the following code snippet: Model.find().sort('date').limit(6).exec(function(error, result) { if (error) { console.log(error); } else { res.send(result); } }); In my databas ...

javascriptnode.jsmongodbmongoose

Methods for updating an HTML-select without a page reload in PHP

I am in need of a solution to update a dropdown list without refreshing the page. The scenario is that I have a form where I can add elements, and another form with a dropdown list connected to a database. If the element I want is not available in the drop ...

javascriptphphtmlajaxmysqli

Choose a specific 24-hour range with the Date Interval Selector

I am currently utilizing the Date Range Picker plugin for bootstrap from the website http://www.daterangepicker.com/#examples, and I have a requirement to set the maximum date time range to be within 24 hours. Below is an example demonstrating how I can s ...

javascriptjquerybootstrap-daterangepicker

What is the process for integrating the toastr-rails gem into a Rails 6 project?

Hey guys, I've been struggling to integrate the toastr gem into my Rails 6 project where I already have the devise gem set up. My main roadblock seems to be understanding webpacker and how to make toastr-rails webpacker friendly. Despite going throu ...

cssruby-on-railsbootstrap-4toastrruby-on-rails-6

What is the process for including CSS in the .ashx.cs code-behind file in ASP.NET?

How can I insert a css class in the .ashx file while the .aspx UI page displays it as a string? What is the method to include css in the code behind of the .ashx page? I would like the text "Cook" to be displayed in red. Problem: https://i.sstatic.net ...

cssasp.netashx

Steps for including a URL in an ng-repeat when it is not included in the JSON object

After making a http call, I am getting a JSON object. One of the properties within this object is LinkUrl. Sometimes, LinkUrl will contain a predetermined URL from the returned object, while other times it will only have a file name. In the latter case, I ...

javascriptangularjsjsonregex

What is the best way to retrieve the 'items' data stored in this list?

I am working with a list of data that includes 6 categories - bags, shoes, girls, boys. Each category contains the same type of data like id, items (with properties: desc, id, imageUrl, name, price), routeName, and title. My goal is to loop through all ca ...

javascriptreactjs

Include a character on the right side without shifting the text to the left

Below is the HTML code I am currently working with: <div class="last_img"> <p>Galutinė žetono išvaizda:</p> <span class="zetin11">A</span> <span class="zetin12">A</span> < ...

htmlcss

Transferring live data between AJAX-triggered pop-up windows

Utilizing modals frequently in my application is a common practice. There are instances where I need to transfer data from one modal box to another. For instance: Suppose there is a table listing different car manufacturers (Audi, BMW, Honda, etc). Each r ...

javascriptphphtmlajax

Retrieving specific data through a Jquery-Ajax fetch

I'm currently working on a webform that utilizes knockout.js. In one section of the form, I need to retrieve a value based on the selected item in a select list. Here's the snippet of code from my viewModel: self.discoveryForms = ko.obse ...

c#ajaxjquerydata-bindingknockout.js