Issues with first load on mobile devices

  • Resolved digitalmilkshake

    (@digitalmilkshake)


    4 years, 5 months ago

    Hi I’ve noticed issues with first load on mobile devices… testing with i-phone. Both safari and chrome mobile browsers show the same fault.

    The age gate loads and then disappears behind the background colour on first load (only on mobile)?

    Once you refresh the browser the age gate loads again and works as it should…. concerned their bounce rate is increasing due to the age gate issue on mobile… Not really sure what’s happening, any help would be appreciated.

    This did work fine when it was first installed around a year ago. All plugins and WP version up to date and no new plugins have been installed since. Works great on desktop ??

    Thanks

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Phil

    (@philsbury)

    Hi @digitalmilkshake – just done a quick test on iPhone 11 Pro/iOS 14 and it’s all good for me, but I’ll dig a little deeper on some other versions this evening and see if I can find anything.

    Will come back to you.

    Cheers
    Phil

    Thread Starter digitalmilkshake

    (@digitalmilkshake)

    Thanks a lot Phil, much appreciated!

    Plugin Author Phil

    (@philsbury)

    Hi @digitalmilkshake,

    Given this another test and seems to work fine for me, tested on:

    iPhone 11/iOS 14 on safari and chrome
    (ancient!) iPhone 5s/iOS 12 on safari and chrome

    Are you logged in or out when it plays up?

    Cheers
    Phil

    Thread Starter digitalmilkshake

    (@digitalmilkshake)

    Hi Phil, Thanks for that.

    I’m not logged in when viewing.

    I have had the issue reported and tested on an older iphone 7 but also the latest SE model both with up to date software (The owners phone ?? ). The age gate is present but isn’t visible until you reload.

    The functions are still there even though the visuals (logo & button styling) are not showing (if I guess where the button is, it’s still clickable). Only the background colour is visible on first load… As if foreground is not rendering properly?

    All android tests are working, newer iOS devices and all desktops are fine too.

    Sorry to be a pain!

    Cheers Phil

    Plugin Author Phil

    (@philsbury)

    All good info, I’ll see if I can get it to act up on the iOS simulator

    Cheers,
    Phil

    Plugin Author Phil

    (@philsbury)

    Hi @digitalmilkshake,

    I’ve run a load of tests on lambda and they’re all coming back showing the age gate, here’s a link to the tests (it expires in 7 days).

    But – in landscape, I do seem to be able reproduce it. Looks like a possible css issue there which I’ll have a look at and try to work out

    Cheers
    Phil

    Plugin Author Phil

    (@philsbury)

    Hi @digitalmilkshake,

    Can you try adding this CSS, think to should stop any misbehaving:

    
html.show-scroll.age-gate-restricted body {
    overflow-y: hidden;
}

    Cheers
    Phil

    Thread Starter digitalmilkshake

    (@digitalmilkshake)

    Sure I’ll give a shot. Is this to be used with an @media max width query?

    Cheers!

    Plugin Author Phil

    (@philsbury)

    I’d do it for all, while we’re not seing the issue on desktop there’s still a bit of overflow that might cause issues in future.

    Cheers
    Phil

    Thread Starter digitalmilkshake

    (@digitalmilkshake)

    Good fix, css inserted and all working as normal!

    Thanks so much for looking into it!

    All the best

    Dean

    Plugin Author Phil

    (@philsbury)

    Happy days! I’ll mark as resolved on this one then.

    Cheers
    Phil

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Issues with first load on mobile devices’ is closed to new replies.