-
Hey legends,
I added a sidebar today and changed the font as well, and what’s happening is too bad.
I can see a huge layout shift today.
Especially on images, buttons, etc.
Help me resolve the issue.
-
I’ve run a lighthouse test, it turns out your performance is 100:
https://app.screencast.com/lXYn2alT4rJyII don’t see any layout shift issue.
-
Why don’t you open the page, find the image on the page, then refresh the page. (As I said earlier).
You will see things dancing. It’s quite obvious, I have checked multiple times. Can you?
-
I have captured the movement. You can check the screenshots. Especially, columns, buttons, images, etc are dancing.
I think, the containers I am creating for separate designing are also moving from left to the center. So, there are no alignment issues. I also notice a slight movement on the sidebar and menu.
Can we add some CSS to fix these alignment issues?
NOTE: David had provided me with a CSS to align things center, as I did, I can see the issue on images is resolved.
Now, things within the contain, like the column, and button are moving, and the header (including heading, and menu) are moving slightly.
-
Hi there,
This issue commonly occurs when using a script optimization plugin that optimizes CSS delivery. What happens is that when the page loads, it renders before the CSS is fully applied. This can cause elements to briefly appear in their unstyled state (defaulting to left alignment) before snapping to their intended styled position (center).
If you have any such plugin installed, could you try temporarily deactivating it to confirm if it’s the cause?
-
You must be right. Can you see the lighthouse again? I can see there is a shift in the page speed insights, check fresh URL. The issue is on mobile and desktop. I think, you can better understand. As it’s completely fine on the other site that’s using the same theme and plugins.
Here is my guess.
When I added a sidebar but I had an element that was giving instructions to use no sidebar, something went wrong with the column and button settings. I have faced this kind of issue twice earlier on the other site (link added) and was fixed with an additional CSS.
As I fixed the image issue by adding an additional CSS of alignment. Can you provide me an additional CSS for buttons, and columns to give me absolute or relative (whatever fits here) positions?
-
I do not see the layout shift, I don’t think extra CSS is needed.
https://app.screencast.com/miktt3jwQHNX4The lighthouse test didn’t detect layout shifts as well.
- You must be logged in to reply to this topic.