Scrollable container mobile scrolling clunky

Hello

I currently have the majority of the contents of the splash page at jaredmadere.com inside of a scrollable container

I had posted about this topic previously however now the topic is closed

I currently have the following css inserted inline into the Row
width:100vw;height:100vh;overflow:scroll;

when this is enabled everything works on desktop beautifully- but on mobile platforms/phones the scrolling is extremely clunky- if you remove the code it goes back to being a smooth scroll as you would expect from your phone

What can I do to fix this? I the contents of the page separated from the background in a container or something similar so that the long grid of images does not force the background image to stretch and stretch and stretch

Thank you so much! Login info below in private note

Hi there,

Thanks for writing in.

You mean you wish to implement that inline style for desktop only? And make it normal for mobile? In that case, please remove that inline style from your row, instead, add full-screen-row to your row’s Class input field.

Then add this CSS to your global custom CSS.

@media ( min-width: 980px ) {
.full-screen-row {
width:100vw !important;
height:100vh  !important;
overflow:scroll  !important;
}
}

Thanks!

Hi Rad

Thank you for this

I would like to implement it for desktop AND mobile however I need to find a way to make the scrolling on the mobile version more smooth, if you test it as it is now you will find it is very clunky, remove the inline css and it becomes smooth again BUT it also stretches the background

I need to find a way to have it like it is now BUT with smooth scrolling on mobile, what is the best way to do this?

Thanks again!!

Hi there,

Unfortunately, it is not possible to have them both. The problem of the scrolling is the fact that mobile phones do not have enough CPU capacity to calculate stuff in a real time with the best performance.

Unfortunately, it is not possible to do so for the mobile devices. I strongly suggest that you think of an alternative view for the mobile. Please use the Hide Based on the Breakpoint feature to hide the content on mobile devices and add another alternative only for mobile devices in this case.

Thank you.

Thank you for this!

Is there some other way to achieve the same effect then? All I want is for the images to scroll but the background to remain frozen in place so that the background does not get stretched to be so long-is there a way to achieve this using paralax settings or something similar?

Thanks!

Hi there,

It seems to be a normal scroll feature of the device (due to overflow:scroll). Hence, it’s not totally controlled by javascript, but by the device’s browser itself then multiplied by smooth-scrolling and the result is the performance issue. Maybe a custom scrollbar would work, but that again uses a javascript. I recommend consulting it to a developer with better understanding of javascript scrolling, maybe they can add easing to the standard scroll bar or custom scroll bar.

Thanks!

Is there some sort of way to approach this without consulting a developer? I feel like there must be a simple solution I can implement using paralax?? All I want is for the background video/still not to get stretched but still be able to have a long grid of content/images float on top of it- can you think of any other solutions that I could implement using the tools available in xtheme/cornerstone without needing to bring in a developer? I feel like there must be a simple css+paralax solution?

Hi there,

Unfortunately, we can’t provide customization here especially the modification of existing core features. And especially it’s intended to be disabled on mobile devices. And it could cause more issues, which is why we recommend a developer with dedicated time.

Thanks for understanding.

Thank you for explaining I now have a clearer sense of the limitations

One question
I’ve implemented what you described above re: full-screen-row

this works great on desktop but now on mobile my background image is sooooo so so stretched out- how can I make it so that it doesn’t stretch out but instead is tiled vertically? I’ve tried playing with the REPEAT and SIZE & POSITION settings in the background image section for the page but it does not seem to have any effect on the way the image is being stretched on mobile

second question- is there a way to specify an alternative background image for mobile platforms?

Thanks!

Hi there,

Would you mind providing the exact URL where the full-screen-row class is implemented? I can’t seem to find it. But yes, possible to change the background through CSS too.

Thanks!

Awesome thank you

Yes it is at the splash page of
http://www.jaredmadere.com
Login info in a secure note below

Hi there,

I went to the page in question and disabled both the video and background of the Row. Instead, I added the CSS code below in the CSS section of that page (Check the Secure Note)

This is a simple version of what you already want to do without having the background too zoomed in on mobile devices.

I just want to mention the implementation that you said you did on your last response will not work on mobile devices because of the same original problem you already mentioned in the question that is having a slow scrolling experience.

The solution I gave is not using the Javascript to have a parallax effect and it uses a simple CSS code background-attachment: fixed;

Thank you.

Hello

Thank you so much for this

This looks fantastic on desktop however on mobile the background is still really stretched. Do I need to add/remove something to get it to work on mobile?

Also how to I add the video background back?

Thanks so much!!

Hello There,

The background image is stretched because it is set to cover by default. It is best that you review how background image hows. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

To add a video background, the background image may no longer appear. Simply enable it in the background type tab as shown below:

Hope this helps.

I think you misunderstand my question

All I want to do is

christopher.amirian posted on this thread with some code that he added that fixed my problem on desktop- it stopped the background image from getting stretched and instead just made it a fixed image

for some reason on mobile it does not do this- the image gets stretched out so it’s crazy distorted

What code do I have to add so that the background image will behave identically to Christopher’s implementation on desktop- but on mobile? I would like the background image to be fixed on mobile also

Thank you!!

Hello there,

I can see that the image is fixed on mobile. You can see it on the image below:

The code that my colleague gave you applies for both desktop and mobile. I will share to you a screenshot of the code and the site on mobile resolution. The resolution is about 480px and below.

You might be looking a cache version of your site, kindly clear your browser cache to make sure.

If you still have the same problem, can you give us a screenshot image of where the distored image shows up?

Thank you.

I think there is some sort of problem, I have tried in both safari and chrome on my iphone and have cleared the cache in both and still I get a stretched background~any idea what the problem is or how I can fix it? Are you viewing on a phone or a tablet?

Hi there,

Seems to be okay on my end, but please try changing this CSS

.full-screen-row {
  background: url('http://jaredmadere.com/wp-content/uploads/2018/03/11.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}

to this

@media ( max-width: 979px ) {
.full-screen-row {
  background: url('http://jaredmadere.com/wp-content/uploads/2018/03/11.jpg') no-repeat center center;
  background-size: 100% auto;
  background-attachment: scroll;
}
}

Hope this helps.

Hello

Thank you for this but it made it much worse. I think your code is meant to do something else as it makes the image sit in the middle of the page instead of stretching properly

I had to change it to this and it still doesn’t work properly on mobile!

@media ( max-width: 979px ) {
.full-screen-row {
background: url(‘http://jaredmadere.com/wp-content/uploads/2018/03/11.jpg’) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
}

What can I do to fix this?

Hi there,

Unfortunately, the feature you want to have is not possible to implement because of the problem that ios have on rendering the cover background:

I did a research and found out that my code will not work on iOs and it actually is not possible to do what you want especially for a long page like yours.

The only alternative that I thought can be helpful is to change the code to not have a background in mobile view and just have a solid color:

.full-screen-row {
  background: url('http://jaredmadere.com/wp-content/uploads/2018/03/11.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 979px) {
    .full-screen-row {
         background: none #000000 !important;
    }
}

Unfortunately, that is a problem of the iOs browsers and we can not do anything about that. If you check my code in it is working on Chrome desktop and Android. But iOs does not render it correctly and there is no solution for that.

Thank you for your understanding.