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

struggling to implement captcha verification with jQuery validation

I've been working on real-time captcha validation using jQuery Validation version 1.11.1. The captcha value is stored in a session variable called security_code. I'm utilizing the remote method of jQuery for this purpose, which is my first time u ...

phpjqueryjquery-validate

Display hidden div with Jquery upon successful data retrieval

I am currently dealing with a script that requires the display of a DIV containing a small FORM only when a database query returns a result of 1 or more. The MySQL query responsible for checking data is functioning correctly and populates a variable calle ...

jquery

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...

javascripthtmlcssfilebackground

How can I display all categories in a Radar chart using amcharts 5

I'm currently using React with amcharts to generate a Radar chart. The data I have is structured as an array of objects like this: { category: 'Something', value: 5 }. There are a total of 12 items in the data set. However, when plotting t ...

javascriptreactjsnext.jsradar-chartamcharts5

What is the best way to implement an 'onKeyPress' event listener for a <canvas> element in a React application?

I've been working with React for a while now and I understand how its event system functions. However, I've run into an issue where the onKeyPress event doesn't seem to be triggering on a <canvas> element. Surprisingly, it's not w ...

javascripteventsreactjs

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

Tips for isolating all the Javascript loaded via ajax or jquery.load within a specific child scope instead of a global scope

I am currently working on a solution to embed a third-party page into my site using ajax/jquery.load() to avoid using iframes (CORS requirements are already handled by the third party). My dilemma lies in the fact that the main host site loads jquery 1.x ...

javascriptajaxiframewebclosures

Sending information to a PHP script using Ajax

I am working on a project that involves input fields sending data to a PHP page for processing, and then displaying the results without reloading the page. However, I have encountered an issue where no data seems to be passed through. Below is my current s ...

javascriptphpjqueryajax

Enclose each set of objects, such as text, within a separate div, except for div elements

Is there a way to wrap each immediate group of objects that are not contained in a div with a wrap class? Input: var $code = 'Lorem Ipsum <p>Foo Bar</p> <div class="myclass"></div> <p>Foo Bar</p> <div clas ...

javascriptjqueryhtmlchildren

Headers cannot be set again after they have been sent to the client in Express Node

I attempted to create a post request for login with the following code: router.post('/login', async(req, res) =>{ const user = await User.findOne({gmail: req.body.gmail}) !user && res.status(404).json("user not matched") c ...

javascriptnode.jsexpress

Dealing with Ajax errors in Django reponses

My code includes an ajax call to a Django view method: $("#formi").submit(function(event){ event.preventDefault(); var data = new FormData($('form').get(0)); $.ajax({ type:"POST", url ...

javascriptjquerypythonajaxdjango

Steps for designing image animations with fade in and fade out effects

I have a task to enhance the current code provided below, which currently works with only two images. HTML: <div id="cf"> <img class="bottom" src="<?php bloginfo('template_directory') ?>/assets/img/image1" /> <img class ...

htmlcsscss-animations

What steps can be taken to enhance the functionality of this?

Exploring ways to enhance the functionality of JavaScript using the underscore library. Any ideas on how to elevate this code from imperative to more functional programming? In the provided array, the first value in each pair represents a "bucket" and the ...

javascriptunderscore.js

Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices. I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendl ...

jqueryhtmlcss

obtain an inner element within a container using the class name in a div

I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...

javascripthtml

Interfacing shared memory between a C++ and JavaScript program

Is it feasible to have shared memory that both a C++ program and a JavaScript program can access simultaneously? The goal is for the C++ program to write to memory while the JS program reads from the same location. ...

javascriptc++node.jsshared-memory

What could be the reason for req.route displaying the previous route instead of

Question: const router = express.Router(); router .route('/:id') .delete( validate(messageValidator.deleteById), MessageController.deleteById, ) .get( validate(messageValidator.getById), MessageController.getById, ); ...

javascriptnode.jsexpressexpress-router

When the text is long, it does not extend all the way to the right

I am working on designing a login page and have created an input text field for the user's email address. However, I have noticed that when the email address is long, there is some space left at the end of the border (I suspect it may be due to paddin ...

htmlcss

Altering the color of numerous labels using ajax jQuery and .NET Core MVC

I have developed a feature that allows users to choose answers using radio buttons. Once the user has selected all answers and clicked Submit, the answer labels will be displayed in the following three scenarios: If the user selects the correct answer lab ...

c#jqueryajaxasp.net-core-mvc

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

I have been attempting to utilize JQuery .append(data) on success in order to change the value of an input to the appended data like this: .val(append(data)), but it doesn't seem to be working. Surprisingly, I can successfully change the value to a st ...

javascriptjqueryajax