Chrome displays a rendering defect

Recently, I developed a menu that moves along with the window position as users scroll. However, an unexpected glitch occasionally occurs when scrolling up and down in Chrome 30 with OS X 10.9 and Windows 7. Interestingly, hovering over the anchor tag causes it to jump to the correct position (1 pixel above). Could there be an issue in my code? Is this a known bug?

Feel free to take a look at this JSFiddle Demo!

$(document).ready(function(){
  $(window).scroll(function(){
    var newTop = ($(window).scrollTop() + 40) +'px';
    $('#menu').stop().animate({ top: newTop}, 500);
  });
});

Update: Good news - the issue is resolved in Chrome 31.

javascriptjquerycssgoogle-chrome

Answer №1

It appears that there may be a rendering bug causing the glitch based on the following observations:

  1. Manually triggering a repaint resolves the issue.
  2. The glitch is not present in other browsers that were tested.

One way to work around this issue is by adding a callback to the animation:

$('#menu').stop().animate({ top: newTop }, 500, function(){
  $('#menu').css('overflow', 'hidden');
  setTimeout(function(){
    $('#menu').css('overflow', 'auto');
  }, 10);
});

You can see a demonstration of this workaround on jsFiddle.

Unfortunately, it seems that both setting and unsetting a property (in this case, overflow) was necessary. The use of 10 in the timeout is not ideal, but sometimes you have to make do when dealing with browser bugs.

Good luck resolving the issue!

Answer №2

I completely agree with Adam's assessment that this issue is indeed a rendering bug. When animating the menu, using the translate() transform function eliminates this problem altogether.

Additionally, there are several advantages to utilizing this approach:

While jQuery core may not support animating with translate() by default, an available plugin offers this capability at , or you can resort to using .css() and rely on CSS transitions for smooth animation effects.

Below is a demonstration using the mentioned plugin:

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.stop().transit({ y: newTop +'px' }, 500);
});

You can view the plugin demo here: http://jsfiddle.net/Hb3jS/5/

Here is an illustration of how to achieve the same result using CSS transitions:

JavaScript

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.css({ transform: 'translateY(' + newTop +'px)' });
});

CSS

#menu { 
    transition: all .5s;
}

You can experiment with the CSS demo provided here: http://jsfiddle.net/Hb3jS/6/

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

What is the best way to store checkbox statuses in local storage and display them again in a JavaScript to-do list?

I'm currently working on a to-do list application using basic JavaScript. One issue I'm facing is saving the checked status of the checkbox input element and displaying it again after the page is refreshed. Since I'm still learning JavaScrip ...

javascripthtmlcssweb-frontend

During the for loop, a string variable with the prefix "undefined" is

I'm currently working with a drop-down menu where I use the .Change() function to trigger a specific action. This action involves obtaining data using the getJSON method and then creating an array string for an mp3 file based on that data. The code b ...

javascriptjquery

Troubles with flexibility in image placement

I am working on adjusting my design to accommodate smaller screen sizes where elements may shift to a second line. I want these elements to align to the left instead of being centered. The image below illustrates my goal: https://i.sstatic.net/CzX5V.png C ...

htmlcssflexbox

Issue with Angular UI-Router nested views: Content not displaying

I'm attempting to incorporate nested views for a webpage using angular ui-router. I have set up the state definitions according to various tutorials, but I am unable to display any content in the child views. Surprisingly, there are no errors showing ...

javascriptangularjsangular-ui-routernested-views

What is the best way to safely store a logged-in user on the client-side?

As I delve into creating a login system for my simple social media website where users can make posts and view feeds from fellow followers, I've successfully implemented user login. Upon logging in, I'm able to retrieve the user's credential ...

javascriptnode.jsauthenticationcookiesremember-me

Center float elements with a percentage width

I am attempting to design a layout in which two elements float alongside each other, starting from the center. I have been successful in achieving this, but only when the width of the two floating elements is fixed. Want to take a look? Follow this link: ...

htmlcss

Efficiently managing multiple requests and responses with Ajax data

I have sent 3 requests in Ajax and my webservice returns 3 success messages. However, I only want to display one. For example: .done(function(shipdata) { var ship = $(shipdata); var msgerror = ship.filter('#alert'); if (msgerror == "INVAL ...

jqueryajax

Ways to separate information from a database into multiple option tags for a dropdown selection menu

I've been grappling with this problem for weeks - my data is currently listed in one massive option tag, but I need it to be split into multiple option tags. Can anyone help out? (Node.js newbie here) ------------------------------ CODE ------------- ...

jquerynode.jsajaxexpress

What is the best way to place a block with a different color directly beside another block?

example my block I'm interested in adding a black block after the red one with some text, similar to the example shown in the first screenshot. Despite my attempts, I couldn't get it to work. As a newcomer to CSS, I'm facing some challeng ...

htmlcsswordpresselementor

Running Next.js with various environment variables

In my NextJS project, I'm looking to set up three different environments: development, staging, and production. Each environment requires specific variables to run properly. For development, I use a file named .env, for production it's .env.produ ...

javascriptnext.jsenvironment-variables

The usage of Cross-domain AJAX GET parameters is restricted

Currently, I am attempting to retrieve data from an API using JavaScript, but unfortunately I am encountering an error in the process. $.ajax({ dataType: "jsonp", url: "https://www.bitstamp.net/api/ticker/", type: "GET", succes: myfunction ...

javascriptjqueryajaxjson

"Troubleshooting issue: jQuery AJAX encountering problems with parsing JSON

I recently came across a Uncaught SyntaxError: Unexpected end of input error in my code. var dataURL = "LineChartController?tp=" + tpAtt + "&dept=" + dept + "&date=" + dateMY; alert(dataURL); var JSONdata = jQuery.aja ...

javascriptajaxjquery

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

javascripthtmlbootstrap-4

Breaking down an array into groups - where did I go wrong in my code?

Check out the following code : function splitArrayIntoGroups(arr, size) { // Splitting the array into groups. var newArray = []; for(var i = 0; i < arr.length; i++){ for(var j = 0; j < size; j++){ newArray.push(arr.splice(0, size)); ...

javascriptarraysalgorithmloopslogic

What is the best way to integrate a CSS designed flag in my website's top navigation bar?

My goal is to make my website multilingual, allowing users to switch between languages using flags in a dropdown menu. Initially, I tried creating the flag images solely with CSS for better resizing ability but faced difficulties. So, I resorted to using s ...

htmlcss

Implementing ordering and limiting of elements in NestJS TypeORM relations

I am new to typeorm and relationships. I am currently facing some challenges and feeling a bit confused. I have a question regarding sorting relations in typeorm by id or createdDate without explicitly mapping them and limiting the number of elements. Here ...

javascriptnode.jstypescriptnestjstypeorm

Scrapy encountering a challenge with retrieving empty pages containing JavaScript code

Every time I try to use scrapy to scrape or view (or similar pages on that site), all I get is a blank page. The page source just shows hidden javascript code, nothing else. I've experimented with different user agents, proxies, settings, and more ( ...

javascriptpythondjangoscrapy

Issue with Flex property not being supported in Safari browser

.rq-search-container { position: relative; width: 100%; background: white; display: flex; flex-direction: row; align-items: flex-start; border-radius: 2px; z-index: 30; -webkit-flex: 1 0 15em; } While this code functi ...

javascripthtmlcsssafariflexbox

Steps for achieving smooth borders on a 3D model using Three.js

Encountering an issue with the 3D model rendering as the mesh border appears to be jagged. Included images of the model loaded using three.js and the same model in Blender. Is this problem related to the 3D model itself? Loader = new THREE.JSONLoader(true ...

javascriptthree.js

Vue Js: Addressing the lag in data/model updates

I have created a sample that mirrors the work I am currently doing. var App = new Vue({ el:'#app', data:{ demoText:'text', sections:2, sectionData:[0,0] }, methods:{ changeData:function(){ for(var i=0;i ...

javascriptvue.js