Slider Background 100% height on touch devices. Toolbars pose problem

Design help General
1

Hello All,

Here is a bit more of an advanced problem. I created a slider background that sits below all other content to change slides. It is 100% height. On my iPhone 5s, when the page loads and you start to scroll, the area where the toolbars are causes the background to not load to full height until you release your finger. Then it reloads the background and it shifts to fill. This happens for each slide if the toolbar becomes visible again. Can anyone help? @bartekkustra @vincent @PixelGeek @cyberdave

http://daoderma.webflow.com/
https://webflow.com/design/daoderma?preview=d7619327cdbf64f906291de6599bd001

Thanks guys!

2

Hey,

iOS scrolling is different from the desktop scrolling. On desktop each scroll is an event trigger. That means that everytime you use your mouse scroll or touchpad on your laptop you have a trigger that works like this:

:: Scroll 
:: :: event start
:: :: event stop
:: :: reload UI

So scrolling quickly let’s say 3 times cause the UI to reload 3 times. On mac it’s smoother, because an event is called each pixel rather than each scroll step.

On iOS devices it looks differently. Scroll is actually an event that is happening from the touch to stop scrolling.

:: You touch the screen and drag it
:: :: event start
:: :: you release your finger from screen
:: :: the scroll continues and slows down
:: :: scrolling stops
:: :: event stop
:: :: reload UI

Hope that helps and I hope I understood the question correctly…

3

Ok, I’ve re-read the question and checked on an iPhone 5. I see what you’re having here. Well that is very much connected to the thing I’ve wrote above. Instead of height 100% maybe you could try setting the height of this element using jQuery animate?

$(document).ready(function() {
  $('.slider').animate({
    'height' : $(window).height()
  });
  $(window).resize(function() {
    $('.slider').animate({
      'height' : $(window).height()
    });
  });
});
4

How would I apply that? Do I have to modify the style at all?

Thanks

5

No, the code above has to be put in footer section in Custom Code. Remember to have it in <script></script> tags!

6

Thanks Bartosz but it didn’t work ;(

Heres what it looks like on my phone. As you can see that black bar stays there until I release my finger to let it load. It then does the same thing anytime I scroll up.

640×1136 277 KB

7

I see it’s not working. That is because I’ve made a typo in code… Please copy&paste again the code from above.

8

Hey Bartosz,

Now it doesn’t resize and the slider remains the height when the control bars are visible. This leaves that same black space at the bottom only now it’s permanent.