After installing (and uninstalling) Autoptimize, Async JavaScript, BJ Lazy Load, and Leverage Browser Caching plugins, my header shifts back and forth on page load - can you help find the fix?

I am pretty good with CSS but can't find the culprit of the fix. If you click the link you will most likely (haven't tested this bug in all devices and screen sizes - i see it in Chrome on Mac) see the upper left logo and menu items shift back and forth about a pixel.

I was working on page speed and one of those plugins did this. After deleting all four of those, it still is doing it. (The link below they are still activated, but i tested with another staging site deleting them and it didn't change.)

Can you help me come up with a CSS fix? I use Dev tools console every day - is there a way to "Freeze" or stop the page load at the exact moment this shifts, so i can inspect the CSS and compare to when page is loaded - maybe similar to how you can use breakpoints in JavaScript?

Needless to say lesson learned about making backups and / or using staging site to test plugins like those. Or in this case a staging staging site!

Thanks!

After installing (and uninstalling) Autoptimize, Async JavaScript, BJ Lazy Load, and Leverage Browser Caching plugins, my header shifts back and forth on page load - can you help find the fix?

I am pretty good with CSS but can't find the culprit of the fix. If you click the link you will most likely (haven't tested this bug in all devices and screen sizes - i see it in Chrome on Mac) see the upper left logo and menu items shift back and forth about a pixel.

I was working on page speed and one of those plugins did this. After deleting all four of those, it still is doing it. (The link below they are still activated, but i tested with another staging site deleting them and it didn't change.)

Can you help me come up with a CSS fix? I use Dev tools console every day - is there a way to "Freeze" or stop the page load at the exact moment this shifts, so i can inspect the CSS and compare to when page is loaded - maybe similar to how you can use breakpoints in JavaScript?

Needless to say lesson learned about making backups and / or using staging site to test plugins like those. Or in this case a staging staging site!

Thanks!

http://04a.b95.myftpupload

• plugins
• css
• headers

• Do you still have same css files loaded? Are you sure there are no additional .css loading? – Roland Commented Apr 2, 2019 at 20:25
• Yes it is the same - my working theory is Autoptimize changed some CSS. What i just found, was this CSS rule which i changed to be padding: 0px and problem solved: @media only screen and (min-width: 800px) { .no-overflow-y body { padding-right: 9px !important; } } I don't completely understand what happened, but that seems to have fixed it. – Ben Blue Commented Apr 2, 2019 at 20:31
• so, all good? :) – Roland Commented Apr 2, 2019 at 20:42
• yea looks like it. What's the right thing to do to my question here? – Ben Blue Commented Apr 2, 2019 at 20:43
• I guess you should do the 'Answer your own question', or something like that, thingy – Roland Commented Apr 2, 2019 at 20:46

1 Answer 1

i found this CSS: @media only screen and (min-width: 800px) { .no-overflow-y body { padding-right: 9px !important; } }

and changed it to @media only screen and (min-width: 800px) { .no-overflow-y body { padding-right: 0px !important; } }

and that solved the issue.