Mobile horizontal scroll on initial load, fixes on refresh

  • 2 August 2017
  • 9 replies
  • 54 views
acodyjr

Hi All,

We’re seeing an issue on mobile where when we navigate to the page URL, many paragraphs are extending right resulting in the horizontal scroll. For example, https://learn.sae.edu/metro/

If you hit refresh, the elements reposition properly as we designed in the page builder, and then the page will display normally if we return since we’re cached. None of the elements on the builder are out of bounds.

While we know to refresh to fix the issue, leads will see a poorly designed page and bounce.

9 replies

Jess
Rank
Userlevel 7
Badge +1

Hey Andrew!

I’m sorry you’ve run into this!

I’m going to pass this issue along to our developers and see if they know what’s up, or if they have a way to troubleshoot this. I’ll keep you posted on any findings! Hang tight!

acodyjr

Hi Jess

Has there been any update on this? Still experiencing the problem. Thanks!

leah.ann

Hey @acodyjr,

Your problem sounds similar to one that we were having a while ago. I was given this workaround by Unbounce Support and it seems to have resolved the issue for us. Try adding this script to all of your pages (Before Body End Tag):

<script type="text/javascript">
  window.setTimeout(function() {
  $('.lp-pom-text').each(function(i, el) {
  if (el.style.width) {
  el.style.width = null;
  }
  })
  }, 100)
</script>
acodyjr

Thank you, @leah.ann. I’ll implement it and do some testing. Greatly appreciate the help!

Jess
Rank
Userlevel 7
Badge +1

Hey Andrew! I’m stoked that @leah.ann was able to jump in here! It looks like that script did the trick on your landing page as I’m not able to recreate that issue, woohoo!!

acodyjr

Unfortunately, the fix @leah.ann provided didn’t seem to work. If you were to clear your history and load the page fresh, all textboxes are off.

Tinkering a bit, I believe I’ve identified the problem.

Any text box that is not using a standard webfont, those from Arial to Verdana in the font selection field, is cause this positioning issue of the textbox.

Switching a few textboxes to Arial, Trebuchet, & Verdana, the initial load mirrored the page builder, but the other elements using Open Sans still showed the original issue.

I know my short term fix is to switch fonts, but it’s disappointing to have those fonts available but causing issues on load without a cache.

Jess
Rank
Userlevel 7
Badge +1

Hey Andrew!

I passed these details on to our Support team and they believe this warrants a conversation with them so that they can dig into this a bit more. There shouldn’t be an issue loading Open Sans, so if you want to start a conversation with them via email at support@unbounce.com, they’ll get back to you ASAP. They’re expecting to hear from you. 🙂

acodyjr

Thank you so much! I’ve sent them a message.

I’m happy to make some progress on this, and I appreciate your assistance!!

L

I’m experiencing the same problem with Open Sans. It’s affecting pretty much all of my landing pages.

Reply


Terms & ConditionsCookie settings