Positioning of element – gridder

[DLB]

Hey Armin,

On this site designed for a client, there is an SVG graphic on the landing page with some CSS animation applied to it (to make it rotate). The positioning of the graphic should be centrally aligned – it has the following CSS applied to it for its positioning…

.witta-logo-home-hero {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);	
}

This works fine when you first arrive at the homepage. However, when you click onto another page (ie: About page etc.) and then click back to the homepage via the site title, the positioning of the SVG graphic appears off-centre. You have to refresh the page again for it to appear in the correct position. This is especially noticeable on Safari and Firefox desktop browsers, and even more so for Chrome, Safari, and Firefox on mobile devices.

On mobile devices, the graphic is sized appropriately for small screens, this loads fine first time round. However, when clicking back to the homepage from another page, the graphic shows it desktop size and not its mobile size, plus it’s way off-centre too. It’s only when you refresh the page that the correct size and positioning appears.

The central positioning of the SVG graphic worked fine before updating to the latest version of Lay on desktop and mobile devices on all browser types. This has only happened since updating to v9.7.8!

Any idea why this happens? Let me know if you need anymore info.

Thanks!

[DLB]

In addition to the above issue, I just noticed that these warning messages are appearing on the site currently — see attached screenshot. They only disappear once the browser is refreshed.

Can this be fixed?

[arminunruh]

hey!!

in your wp-config.php file, can you turn off WP_DEBUG please:
https://chatgpt.com/c/68d78f47-ba40-8325-81fa-e3f45b3d647c

make sure this line:
define( 'WP_DEBUG', true );

looks like:
define( 'WP_DEBUG', false );