Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 5, 2020 at 7:23 am #1235325
    simplicityltd

    Hi,

    I’m trying to get a full screen video (with fallback image) to show nicely. Everything is fine on a desktop but when I view it on a mobile (in this case an actual iPhone 11), the fall back image changes size slightly when I scroll down, causing the page to jump.

    I’ve tried full screen slider & colour section at 100% screen size, they both behave the same. I’ve even tried having two of the same element, one with a video and one with just a background image, only showing the video one on large screens and the image one on small screens but it still jumps.

    Would appreciate any help you can give me.

    August 7, 2020 at 9:04 am #1235957
    Ismael

    Hey simplicityltd,

    Thank you for the inquiry.

    We don’t have the actual device to check this with but this is how we see the fallback image when checked it on a browser’s iPhone 11 emulation.

    Screenshot: https://imgur.com/a/LyEAjrc

    Could you provide a screencast of the issue so that we can see what’s actually going on when you start scrolling down the page?

    Best regards,
    Ismael

    August 7, 2020 at 9:13 am #1235959
    simplicityltd

    Thanks for the reply, link to a video (sorry not sure how to screencast on a device) in the private content.

    Cheers

    August 11, 2020 at 5:13 am #1236564
    Ismael

    Hi,

    Thank you for the screencast.

    Looks like the container resizes because the browser URL field or the top part of the browser collapses or hides when you scroll down. Is there a setting in the phone browser where you can prevent the URL field from disappearing when scrolling down?

    Best regards,
    Ismael

    August 11, 2020 at 4:17 pm #1236691
    Yigit

    Hey,

    I checked your website on my iPhone 7 plus and could not reproduce the issue on my end. I think it happens on bezel-less devices. We will check if anyone from our team has such device :)

    Best regards,
    Yigit

    August 12, 2020 at 1:05 am #1236788
    simplicityltd

    Hi,

    Just FYI, in the video, I’m using the Google browser, not safari. hope that helps your research. Is this something you’ll be able to fix as I can’t ask everyone to find/change settings in Google Chrome iPhone apps :)

    Cheers

    August 14, 2020 at 4:02 am #1237645
    Ismael

    Hi,

    We might be able to fix the issue by applying a specific height to the full screen slider for mobile view or for that specific device (iPhone 11). Please try this css code in the Quick CSS field.

    
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2)
    and (orientation : portrait)  { 
    .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
	height: 800px !important;
    }
}

@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2)
    and (orientation : landscape)  { 
    .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
	height: 390px !important;
    }
}

    This might decrease the height of the slider a bit but this would also prevent the slider from resizing when the URL field of the browser is hidden.

    Best regards,
    Ismael

    August 18, 2020 at 12:00 am #1238643
    simplicityltd

    Alas, that didn’t seem to have any effect. The same page has a similar issue when you scroll to the bottom and the image of the guy sawing resizes to fit the screen as the URL bar comes back when you scroll up.

    I think we may just have to live with it
    Thanks anyway

    August 19, 2020 at 5:10 am #1239002
    Ismael

    Hi,

    Thank you for the update.

    Did you disable the Performance > File Compression settings and remove the browser cache after adding the css code? You might be looking on a cached version of the page without the css modification above.

    Please disable the Performance > File Compression settings, remove the browser cache and try to check the page again. You might want to play around with or adjust the height value in the css code above.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.