Site Title and Menu CSS animation persistence + iframe mobile viewport fill size

[sebastianpetrov]

Hi,

I have a couple questions I hope might have simple fixes. One about iframe behaviour on mobile in laytheme and another about css animation behaviour on page load.

First:

I have an iframe on my homepage which I have set-up to fill the screen on desktop and mobile layouts - no matter what I try so far it won't stretch to the bottom of the viewport on mobile. Can you help me with this?

Second:

When I navigate between pages it appears that a full page load is happening, meaning the menus appear to blink instead of being persistent.

The blink is quite pronounced because there are looping CSS animations on the menus and siteTitle.

Strangely, if I navigate from any page to the home page - the CSS animations are uninterrupted while the contents of the home page is loaded. I want this behaviour for all page navigation and I don't understand why that isn't happening.

I would greatly appreciate any input you may have on these two things.

Please let me know what you think.

If you need to look at the site, may I send the website link in a private message? It is still in development and don't want the staging address listed :)

Look forward to hearing from you.

Best,

Sebastian

[Richard]

Dear Sebastian

@sebastianpetrov

Q1:

Likely the dimensions are already defined within the <iframe> itself, unsure but would need to see via a link.

Q2:

This could be related to "Ajax compatibility" meaning that there is hard loads. At the bottom of the "Lay Options" page you can see if it is on.

---

Best wishes

Richard

[sebastianpetrov]

Hi Richard,

Thanks for your reply.

Q1:

Ok I have sent you the link via chat message.

Q2:

I checked and Ajax compatibility is not checked on. Could it be anything else?

Best,

Sebastian

[sebastianpetrov]

Hello,

I've spun up a another copy of the site and disabled all plugins and removed all custom CSS & HTML.

Site Title and Menu CSS animation persistence

-> I still get full page loads,

-> I tried putting only the CSS for the siteTitle and menu to see what would happen.

-> same result =

... unless navigating from any page TO the home page
that does not interrupt the css animations on the SiteTitle or either Menu.
I even tried toggling the AJAX compatibilty just in case it somehow fixed it.

Can you please help me fix this? Full page loads are super jarring and one of the main reasons I went with Laytheme is because of the smoooth transitions.

Here's a link to the clean version of the site: https://wordpress-414790-2426846.cloudwaysapps.com/

username: zwgvjywatd
password: 87TuRpFC3M

---

iframe mobile viewport fill size - still troubleshooting

I've since discovered the issue i'm having with the iframe is not unique. Apparently It is due to how space is defined relative to the URL bar on mobile browsers. I've detailed it here in case it helps someone else down the road.

Generally speaking...

/*defines height as bottom of screen to *bottom* of URL bar
--sizes element as if URL bar where always *showing*/
body {
    height: 100%;
  }

/*defines height as bottom of screen to *top* of URL bar
--sizes element as if URL bar were always *hidden*/
body {
    height: 100vh;
  }

See Stack Overflow for full explanation: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

What's confusing though is if I open up the iframe link directly the web page in my iframe scales perfectly. I may try generating an DIV with javascript so it sits outside the gridder and put the iframe in there.

[sebastianpetrov]

Hey Richard, I'm really sorry to be a pain. I was wondering if you had been able to log into the staging site? Isn't it strange that even without any plugins active or any other custom code that the menu and site title are hard refreshing on page load? Isn't that a bug of laytheme?

[Richard]

Dear Sebastian

@sebastianpetrov

Not a pain at all 🌝 Will need to take another look, 🔍 i agree that it's not normal behaviour if AJAX compatibility is turned off.

---

Best

Richard

[sebastianpetrov]

@Richard

I just found an easy workaround for getting i-frames to fill the full viewport correctly on mobile and it seems to be working flawlessly.

In case someone else needs it or I need to find this again...

Pasting the link to the web-page that describes the fix - almost effortless to implement in Laytheme.

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

[arminunruh]

oh very nice, i didnt know that one!

[sebastianpetrov]

Hey,

How are you?

I sort of forgot about this and now I'm preparing to launch content updates to beautifulbeautiful.xyz

I can see its not just the css animation that is reloaded between pages, but the site title and menus themselves are reloading. Actually it appears like a full page hard refresh is happening rather than the graceful Ajax partial loads Laytheme became so popular for.

I've tried toggling Ajax Compatibility on/off, disabling all plugins, disabling all custom code and opening the site in a fresh incognito window and I'm still getting full page hard refresh. I can see the site title and menus blink between page loads.

Are there any other troubleshooting steps I can take? Can you please help me with this?

Happy to share staging site details if that will help.

Thanks so much and look forward to hearing from you.

Sebastian

[arminunruh]

this is what makes a hard refresh:

• disable ajax activated
• using links that are not generated by laytheme, but by yourself, and they are missing the data- attributes
• woocommerce plugin is active
• you use shortcodes, for example a shortcode in the footer

[sebastianpetrov]

@arminunruh Thanks so much for your quick reply.

I'm pretty sure my problem is shortcode related then.

I'm happy to kill the mailchimp shortcode I was using in the footer. However, there's another shortcode I'd like to keep - its a Forminator form.

My gut says it goes in 1 of 2 directions - please let me know if I'm completely off the point!

Is Laytheme seeing the shortcode and then forcing a page refresh to improve compatibility with short codes in general? Are there any links to information you can share that might help me try different workarounds?

Or perhaps some shortcodes cause a page refresh and others don't based on how they work? Any advice on how I can attemp to debug this?

[sebastianpetrov]

@sebastianpetrov hey, good morning ☀️@arminunruh have you seen this last message?

[sebastianpetrov]

Hey @Richard @arminunruh

I've removed a non-essential shortcode in the footer, however there is one shortcode on one page for a "forminator" form that has to stay.

I'd love to dig in and try to find a workaround if there is one.

Is there any documentation available on how laytheme is treating shortcodes or how to disable the hard refresh when shortcodes are present?

Please let me know? The new site is so smooth aside from this one page that hard refreshes and I don't know if I can move on with my life knowing this page hard refreshes when it could be another smoooth page load 😂

[arminunruh]

Is Laytheme seeing the shortcode and then forcing a page refresh to improve compatibility with short codes in general?

yes

Are there any links to information you can share that might help me try different workarounds?

no

i don't think there is a workaround