Images in Chrome are shivering when animated at unconventional positions

I am attempting to create a masking animation that reveals an image from its center. The animation is working well, but I have encountered a problem in Chrome where the revealed content shakes.

Here is an example on jsfiddle: http://jsfiddle.net/BaKTN/

I discovered that disabling background-repeat fixes the shaking issue (http://jsfiddle.net/BaKTN/1/). However, the shaking reappears when the outer container's position is on odd coordinates, particularly with percentage-based positioning.

Another example demonstrating this behavior on jsfiddle: http://jsfiddle.net/VbgXB/

I have found that using fixed positioning helps alleviate the issue, even with multiple outer containers that may cause odd coordinates. However, this workaround can interfere with scrolling: http://jsfiddle.net/BaKTN/5/. I am still searching for another solution.

Any insight into the root of this problem and how to solve it without changing the container's coordinates would be greatly appreciated. Could this be related to bug: http://code.google.com/p/chromium/issues/detail?id=140038?

PS. This animation is part of a larger project involving multiple tiles and must remain CSS2 compatible.

javascriptjquerycssgoogle-chromejquery-animate

Answer №1

It appears that the issue may stem from partial pixel values being used for background-position. The problem can be resolved by rounding the values. Here is a demonstration: http://jsfiddle.net/BaKTN/2/

(function($) {
  $.extend($.fx.step,{
    backgroundPosition: function(fx) {
      if (typeof fx.end == 'string') {
        var start = $.css(fx.elem,'backgroundPosition');
        start = toArray(start);
        fx.start = [start[0],start[2]];
        var end = toArray(fx.end);
        fx.end = [end[0],end[2]];
        fx.unit = [end[1],end[3]];
      }
      var nowPosX = [];

Relevant code

      nowPosX[0] = Math.round(((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0]) + fx.unit[0];
      nowPosX[1] = Math.round(((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1]) + fx.unit[1];

End Relevant code

      fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

      function toArray(strg){
        strg = strg.replace(/left|top/g,'0px');
        strg = strg.replace(/right|bottom/g,'100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
      }
    }
  });
})(jQuery);

Edit — Adjusting the position of your #container to whole pixels rather than percentages will resolve the second case, but note that it won't adapt when the window is resized. Check out this adjustment here: http://jsfiddle.net/VbgXB/1/

var $con = $("#container");
$con.css({
  left: Math.round($con.position().left),
  top: Math.round($con.position().top)
});

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

Printing a database value in CKEditor using the select option method

Hello everyone, I'm new to PHP and have a question. I created a select option using a MySQL script with five values. Every time I change the select option value, the appropriate result is displayed. However, the values are not displayed in the CKEdito ...

phpjqueryajaxckeditor

Sending a JavaScript function to a jQuery plugin

I need to pass a function as a parameter to a custom plugin I am developing. The plugin is responsible for handling JSON-P calls. Here is a snippet of the code: (function ($) { $.fn.GetJsonResult = function (options) { var opts = $.extend({} ...

jqueryjquery-plugins

Retrieve the initial value from the TextField

My website features multiple filters, including by date and duration, allowing users to easily find the information they need from a large dataset. There is also a "reset all filters" button that clears all filters and displays the full list of products. ...

javascriptreactjsmaterial-ui

Utilizing Jquery for Enhanced HTML5 Validation

I need to ensure compatibility with browsers that do not support HTML5 validation. My goal is to display the basic error message from the browser using HTML5, while also adding a CSS class of "error" to each input, label, and parent div for fields with err ...

javascriptjqueryhtml

Is there a way to verify the selection of all mandatory fields prior to concealing a div?

var count = 2; $('.next').click(function() { var requiredField = true; $(this).siblings('table').find('tbody tr:nth-child(' + count + ') td').each(function() { var element = $(this).find('center').f ...

javascriptjqueryhtml

Is it possible to find a match by searching through multiple arrays for a corresponding variable name?

Hi there, I'm currently working on a function that triggers an alert if the name of an array of images matches the data attribute of the selected element. This is just a test phase before proceeding with my main project, but I've hit a roadblock. ...

javascripthtmlarrays

Instructions for sending an array of integers as an argument from JavaScript to Python

I have a JavaScript function that extracts the values of multiple checkboxes and stores them in an array: var selectedValues = $('.item:checked').map(function(){return parseInt($(this).attr('name'));}).get(); My goal is to pass this a ...

javascriptjquerypythonajax

Sending a form with checkboxes via AJAX

Currently, I am working with Laravel 4 and have a form that includes a list of departments along with their respective members. To organize this information, I decided to implement an accordion feature wherein all members are grouped under a particular dep ...

phpjqueryajaxlaravelcheckbox

Issue with transition delays on specific elements within a containing element

I'm currently developing an intro animation for a website, where the children are supposed to slide up from the bottom (margin-top: 80px). The container is set with a fixed height and overflow:hidden to create a smooth appearance. Each child has a tr ...

javascripthtmljquerycssanimation

Display a webpage in thumbnail form when hovering the mouse over it

I'm in the process of creating a website that contains numerous sub-pages. I want to display all the links on a single page and when a user hovers over a link, I want to show a thumbnail of the corresponding webpage within a tooltip. I've experi ...

javascriptjqueryajaxiframe

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Having difficulty retrieving a dropdown value with reactjs

Seeking assistance with retrieving dropdown values in ReactJS. Despite attempting multiple methods, I have been unsuccessful in obtaining the values. Can someone provide guidance on extracting these values? Below is a snippet of my code: <Grid container ...

javascriptreactjsmaterial-uiformik-material-ui

Sending multiple PHP arrays as part of an AJAX response

I have been attempting to send multiple arrays in an Ajax request response (get), but have been struggling to achieve it. Here is the PHP code I want to include in the Ajax request response: echo json_encode($catdata); echo json_encode($productdata); ech ...

phpjqueryarraysajaxjson

The API key fails to function properly when imported from the .env file, but performs successfully when entered directly

Working with Vite has been quite an experience for my project. I encountered a situation where using my API key directly worked fine, but when trying to import it from .env file, I faced the error message in the console below: {status_code: 7, status_me ...

javascriptreactjs

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Hey there, I'm having some trouble with the autocomplete feature in Google Chrome. Can anyone suggest an alternative way to disable autocomplete for password fields? By the way, my project is using Vue.js. ...

javascripthtmlcssvue.js

'jQuery' is not recognized as defined, error no-undef

I am currently working on a file that utilizes jQuery for testing purposes: (function($) { "use strict"; // Start of use strict // Configure tooltips for collapsed side navigation $('.navbar-sidenav [data-toggle="tooltip"]').tooltip({ ...

javascriptjqueryreactjsnpmcreate-react-app

What is the best way to incorporate a personalized HTML closing button into the body of a jQuery Dialog box?

Related Inquiry: How to incorporate custom buttons with ids into a dialog-modal jQuery object I'm wondering if anyone can help me figure out how to close my jQuery Dialog using a custom button that I've added to the .html body. Should I change t ...

jqueryhtmljquery-uionclickjquery-ui-dialog

Encountering a hitch while attempting to integrate a framework in Angular JS 1

Having experience with Angular JS 1 in my projects, I have always found it to work well. However, I recently encountered a project that uses Python and Django, with some pages incorporating Angular. The specific page I needed to work on did not have any An ...

javascriptpythonangularjsdjango

Managing and Streaming Music in a Rails Application

Currently, I am storing mp3s using paperclip and they only play back if I utilize Amazon S3. However, I am hesitant to use Amazon S3 because I am unsure how to secure the files. Now, I am reconsidering my approach as I need to secure the mp3s and provide ...

javascriptruby-on-rails-3htmlmp3

What could be causing me to receive no results?

Currently, I am expanding my knowledge in JavaScript, Ajax, and NodeJs. My current project involves creating a webpage that can display a string retrieved from the server. The server-side code is as follows: var express = require('express'); v ...

javascriptajaxnode.js