Side menu starts to open on smartphones when elements have animation

  • Resolved infatum

    (@infatum)


    2 years, 1 month ago

    Hi

    Using Elementor here in tandem with OceanWP. On smartphones, whenever I have animation that shows up from left or right, such as fade from the left or slide from the right, the hamburger menu starts opening by itself. Basically, any animation that happens off-screen calls out hamburger menu. What I noticed, is that animation that play from either up or down do not have this issue.

    ——————–
    On a sidenote, I’ve noticed tables that go off-screen [despite being set to 98-100% max-width] call out part of the hamburger menu (the light grey color curtain on this page). A generic question, which I understand is not related to this thread, is there a way to scale down a table without turning it into a pivot table? I’ve set typography in pixels, but that doesn’t solve it.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Ahmed Amir Hossain

    (@ahmedamir)

    Hi @infatum,

    Thanks for contacting us.

    I have checked your site. Everything showing fine on mobile. Please see the video. If I miss anything could you please share a video of the issue to understand the issue properly? I will check and let you know the update as soon as possible.

    Waiting for your response.

    Regards,
    Amir

    Thread Starter infatum

    (@infatum)

    Hi @ahmedamir

    1. Here’s a YouTube video of real-world scenario. Some slower phones actually hold the side menu for longer. And it also depends on animation speed. The longer the animation, the longer the side menu stays. Tested both Android and iOS devices.

    2. You could also test non-animated tables on this page. The menu seems to close them too. I guess, everything that is off canvas is going to extend the menu.

    PS. Couldn’t use browserstack.com since I had 1 minute under their free plan and it used it for optimizing for a 720×366 phone. Didn’t even see the image. Another site -https://ready.mobi/ shows my page is fine.

    • This reply was modified 2 years, 1 month ago by infatum.

    same anomaly on my website (android only)

    Thread Starter infatum

    (@infatum)

    Regarding the tables on smartphones I adapted the following solution on stackoverflow.com:

    @media only screen and (max-width: 720px) {
    /* horizontal scrollbar for tables if mobile screen */
	
table{
	overflow-x:scroll;
        display:block;
	table-layout:fixed;
    }
}

td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
}

    That no longer shows the side menu off screen.

    • This reply was modified 2 years, 1 month ago by infatum.
    • This reply was modified 2 years, 1 month ago by infatum.
    • This reply was modified 2 years, 1 month ago by infatum.
    • This reply was modified 2 years, 1 month ago by infatum.

    Hello @infatum ,
    I hope you’re doing fine and I’m very sorry for the delay in getting back to you.

    Glad to see that you’ve already figured out a solution. I also appreciate your effort in sharing the solution. I hope that solution will surely help someone who is experiencing the same issue.

    Since the issue is solved now. Do you need any further assistance from us? Feel free to let me know if you need any. I will be happy to assist you.

    Best Regards,
    Prosenjit

    Thread Starter infatum

    (@infatum)

    @prosenjitbarman Hello.
    It only solves for tables. It does not solve for animation that comes from left or right side. The ElementsKit side menu still pops up.

    Thread Starter infatum

    (@infatum)

    Moved the test page.

    Narrowed down the problem to Chrome only. Firefox and Safari do not have this issue on smartphones. Reported to Google. Other browsers – have no idea.

    For a temporary solution, I just avoid any animation that comes from the right side. So, Fade in Left / Up / Down would work just fine even in Chrome. Right does not work. So would be any Sliding. Everything coming from the right extends the canvas and calls the side menu.

    ———————
    If anyone wants to tinker, these would be left part. Changing left to some vs or px does NOT solve it. The menu would be buried deeper left and the user WON’T see it. Only the light grey curtain would slide in.

    I personally had to remove `@media (max-width: 1024px). Otherwise, no effect at all. 

    @media (max-width: 1024px)
.elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements {
    width: 100%;
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100%;
    -webkit-box-shadow: 0 10px 30px 0 rgb(255 165 0 / 0%);
    box-shadow: 0 10px 30px 0 rgb(255 165 0 / 0%);
    overflow-y: auto;
    overflow-x: clip;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-transition: left .6s cubic-bezier(.6,.1,.68,.53);
    transition: left .6s cubic-bezier(.6,.1,.68,.53);
}
    • This reply was modified 2 years ago by infatum.
    • This reply was modified 2 years ago by infatum.
    • This reply was modified 2 years ago by infatum.
    • This reply was modified 2 years ago by infatum.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Side menu starts to open on smartphones when elements have animation’ is closed to new replies.