I recently encountered a strange issue with my centered div layer that transitions from a fixed width to 100% when scrolling down. The problem arises in Chrome and Edge on Windows 10, where certain elements like images shake and jitter during the transition, while text remains unaffected.
After researching, I found that Chrome had previous issues with flickering during transitions without hardware acceleration, but those were supposedly resolved years ago by Google. Despite this, the problem persists for me.
I attempted various workarounds to trigger hardware acceleration, but none proved successful. It appears that the shaking only occurs when transitioning a centered div with a fixed width to full width using margin: 0 auto.
Interestingly, when I tried replicating the issue on JSFiddle, it wasn't consistently reproducible on my system.
You can view the JSFiddle demo here: https://jsfiddle.net/aobrien/vc4n8ecy/
If you scroll down on the demo, you'll notice the chrome logo shaking. The issue seems more prominent on wider screens (around 1700px or higher) when the browser is at full width or scaled to 80%.
//jQuery to add sticky class when scrolling
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.header').addClass("sticky");
} else {
$('.header').removeClass("sticky");
}
});body {
height: 2000px;
}
.header {
background: #335C7D;
margin: 0 auto;
width: 1000px;
transition: width .6s ease;
height: 200px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
right: 0;
will-change: width;
}
.wrap {
width: 1000px;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="wrap">
<img src="https://i.sstatic.net/iaYsc.png" />
<h1> Hello World.</h1>
</div>
</div>
</div>This method seemed simple for creating a full-width sticky menu with a transition effect, yet the issue persisted. Could it be related to recalculations of the centering due to the combination of margin: 0 auto and width changes?
Despite all efforts, I have not been able to find a solution or workaround for this frustrating issue.