Am facing a page load inconsistency issue

Tobyraphael · ‎06-06-2025

I occasionally or sometimes see a text (>Details) on the top left corner of the mobile screen right above the product image slider in product page of the Mobile version. It appears for a second and disappears during page load.

This only happens in the product page of the mobile version. I included a screenshort of the screen record I made for reference.

🙏Please any help provided, will be very much appreciated. Thanks in advance

tim · ‎06-06-2025

Without seeing the site my guess is that this your CSS is being delayed and the element is shown unstyled.

When CSS stylesheet is loaded, the element is either hidden or moved to where it should be.

Can't say more without seeing the site.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Tobyraphael · ‎06-06-2025

This is the site url (affbuy.com)

tim · ‎06-06-2025

Nothing outstanding, except you seem to have a bunch of apps loading too early.

This may be the reason you can notice this unstyled element.

There is a bunch of code, like, say code from ornave which loads literally first thing on the page.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Tobyraphael · ‎06-06-2025

Are you saying it is caused by the ornave code? And if so, how can i fix
it?

Thank you

tim · ‎06-06-2025

Not exactly, it's just one of the potential offenders. Instead of loading your HTML and styles and rendering your page browser has to run this JS code too early in the loading process. Same about Transtore -- it starts too early.

I usually do not recommend editing theme code -- this will stop automatic updates.

But if you wish to proceed, I'd try this:

open your layouts/theme.liquid for edit, find

<html class="js" lang="{{ request.locale.iso_code }}">

and make it

<html class="js" lang="{{ request.locale.iso_code }}" style="opacity:0">

Then find

</body>

and make it

  <style>
    html {
      opacity: 1 !important;
   }
  </style>
</body>

This will make your page completely transparent for the short period of time before browser reaches the end of the HTML. I believe this should be enough to hide that unstyled element.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Tobyraphael · ‎06-06-2025

Can I just uninstall the Transtore app then. Will that fix it without
having to edit the theme code? Thanks

tim · ‎06-06-2025

Can try disabling it's App embed in Customizer.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Tobyraphael · ‎06-06-2025

I did that, but it is still showing 😔.

Am facing a page load inconsistency issue

Am facing a page load inconsistency issue

Community Blog Articles