• Resolved michaelyamada

    (@michaelyamada)


    Hi, I am using Elementor and Astra themes. I wanted to create a first view that fits the mobile screen, so I set the min-height of the image to 100vh. However, when I checked on chrome on my iPhone, the image moved like this↓.

    using Astra theme
    using Twenty Twenty-Four theme

    I have brought Elementor and WordPress versions up to date, disabled all plugins except Elementor, and changed the theme, but as you see above, the result did not change. I tried dvh, svh, lvh but the results were the same. I think the cause of it lies in the address bar of the mobile browser.

    It works fine in the Safari browser but not in the Brave browser.

    Is there any solution?
    Thanks.

    Here are some information.
    iPhone XS iOS 17.3.1
    Google Chrome 123.0.6312.52
    WordPress 6.4.3
    Elementor 3.20.1

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Rica V.

    (@ricav)

    Hi @michaelyamada,

    Thank you for sharing the screen recording.

    It appears to be an FOUC (Flash of Unstyled Content) issue. As a workaround, you can add an Entrance Animation to the container with the pink background.

    For more detailed information, you can also refer to this article:
    https://elementor.com/help/dealing-with-flickers-fouc/

    I hope this solution helps resolve the issue.

    Kind regards,

    Thread Starter michaelyamada

    (@michaelyamada)

    Hi @ricav

    Thank you for the quick response.

    I tried the solution you provided but could not resolve it.
    I tried several Entrance Animations, but they did not work.
    Here is the video and the settings for that page.

    After adding entrance animation and changing CSS

    Best,

    Plugin Support Joel

    (@joelsm)

    Hi,

    Thank you for reaching out, and I hope this message finds you in good spirits.

    To help us pinpoint the cause of the issue you’re encountering, we recommend checking for any conflicts with your plugins or theme. Please follow these steps:

    1. Deactivate all plugins except for Elementor.
    2. Switch to a default Elementor theme, such as the Hello Theme.
    3. Verify if the issue still occurs.

    If the problem is resolved after these steps, gradually reactivate each plugin and switch back to your original theme one at a time. This method will help us identify the source of the conflict.

    Additionally, if possible, please provide the URL of your website. This will allow us to examine the source code and gain a clearer understanding of the problem.

    These steps may significantly aid us in diagnosing the issue more effectively.

    Wishing you a wonderful day.

    Thread Starter michaelyamada

    (@michaelyamada)

    Hi @joelsm ,

    Thank you for your solution.

    I followed your message and switched the theme to the Hello Theme, as I had disabled all plugins except Elementor in the first place. However, the problem still occurred. Behavior is almost the same as in the previous video. I would like it to stay motionless.

    My website URL is listed on “The page I need help with:” above. Please view on mobile (preferably with chrome on IOS).

    Best,

    Plugin Support aracelil

    (@aracelil)

    Hello.

    Thanks for keeping in touch. I tried inspecting the site on mobile, but the site does not appear the same as what you referenced in the provided screencasts. Can you please double check the URL?

    Kind Regards.

    Thread Starter michaelyamada

    (@michaelyamada)

    Hi @aracelil,

    Thanks for the reply, I double checked the URL and it is correct. I will post the URL here as well, just in case: https://cf266992.cloudfree.jp/

    If the site content still does not appear at this URL, it is probably a problem with my server (since my server is in Japan) and I will give up trying to solve the problem.
    As mentioned above, this issue occurred on Chrome on iPhone.

    Regards,

    Alain

    (@alainelementor)

    Hello @michaelyamada!
    Thank you for contacting us.

    I was reading your previous conversation, and I understand it.

    In this case, I’m afraid that the flickering behaviour you experiment is expected.
    This jump/flicker happens because when you scroll the top URL bar shrinks and the bottom bar (with the browser tools) slowly disappears, changing the current Viewport Height. And since your container it’s supposed to be a 100vh of height, this changes.
    Please see this image so you can compare the viewport heights: https://postimg.cc/3ksyrTCg

    I hope this can help you.
    Let me know if you have other questions related to Elementor.

    Regards.

    Thread Starter michaelyamada

    (@michaelyamada)

    Hi, @alainelementor
    Thank you for your response.

    I was previously aware that the mobile URL bar you mentioned was a factor, but could not find a solution to suppress the jump/flicker.

    However, I just checked the site and the jump/flicker is no longer occurring. It was also no longer occurring in my production WordPress environment, so it probably went away with an update to WordPress itself.

    Anyway, my problem is solved. I would like to thank Elementor Team for their continuous support even though I am not a Pro user.

    To anyone else having similar problems.
    I don’t think this problem occurs anymore, but if vh doesn’t fit your screen size well, I suggest you try svh, dvh, or lvh units.

    Alain

    (@alainelementor)

    Hello @michaelyamada!!

    Thank you for your reply. I’m glad this has been handled.
    We will conclude this conversation; feel free to contact us again for further questions.

    Have a good day!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘When the image min-height is set to “vh”, the image moves in chrome on ios.’ is closed to new replies.