0

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.com

  • Do you still have same css files loaded? Are you sure there are no additional .css loading? – Roland Apr 2 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. – bluedimensional Apr 2 at 20:31
  • so, all good? :) – Roland Apr 2 at 20:42
  • yea looks like it. What's the right thing to do to my question here? – bluedimensional Apr 2 at 20:43
  • I guess you should do the 'Answer your own question', or something like that, thingy – Roland Apr 2 at 20:46
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.