Streaming live at 10am (PST)

Hero Image odd height on tablets


#1

Hi there,

I have 2 issues:

ISSUE 1 : https://preview.webflow.com/preview/200?preview=971f16f9e84cb448f6bd037e3a16ac59

I am using a slider image as hero image with 100VH. All good in designer webflow. Issue arise when I am viewing the website on tablet, I have a mini ipad. Image is scaling odd and I have to scroll like 5 times until i got to the next section. Same issue is happening on another page where I am using a hero image, 100VH, not slider, just a bg image added to a section.

Any fix for this?

ISSUE 2: https://preview.webflow.com/preview/201?preview=90118455d77ba297a39e1924939fc017

Trying to get a bg scrolling effect where all images will scroll one after another. So basic we have 3 images. 1 will scroll and other 2 below will be fixed until a point where 2 will scroll and 3 will be fixed and after 3 will scroll as well. Different content on top of every image. Tried 100VH and fixed as position but images are on top of eachother and does not scroll at all.

I am a designer, learning this as we speak so if this may sound easy for some any help would be appreciated.

Best wishes,
John


#2

I've noticed issues in the past with VH unites being messed up on tablets, specifically iOS, as well.

Have you tried adding a max height to it of say around 800px? That might fix the issue.


#3

Hi @tomjohn

Thanks for the tip. Having max height helps on tablet but i loose the full screen effect. On the slider part is working and i got rid of the long scroll part but images does not show, have a grey default background instead. Any other ideas?

The odd thing is this is happening with tablets that are quite old, below hd versions. My ipad is old, 1st generation: 768 x 1024 px. On tablets with resolution bigger than this is working fine, both, the slider and the static hero image. On my samsung s4 i got both working fine.

Seems that issue is only on devices that have low res, even in designer webflow are looking great.

On web version thought resizing the window in any aspect works as well fine.

Best regards,
John


#4

The most common screen height for a tablet is going to be 1024, so you could use that for your max height, but I realize that doesn't help you for landscape.

The problem you're running into is most likely because of the version of iOS that you're running on your 1st gen iPad. I think that the VH issue was fixed with iOS 7 or 8, but your iPad only supports up to iOS 5.1.1. Luckily, the amount of users who are still on that os is super low, so I'd not worry about it and consider yourself the edge case, with the max-height 'fixing' the issue for you.


#5

I'd recommend taking a look at your site here: https://www.browserstack.com. I've not been on a trial basis with them for a while, so I'm not sure how much you can get for free, but it's a lifesaver

Also, it looks like Safari 5.1 doesn't support VH at all, so that's your issue: http://caniuse.com/#search=vh


#6
  1. I have ios 7.1.0 I can update to 9.1 but don/t use it that much, just mostly for some testing.

  2. https://www.browserstack.com. - thanks


#7

Not sure how you were able to get iOS 7.1 on a 1st gen ipad, but regardless VH is not fully supported in 7.1

With the global usage below 1%, I'd say you're probably okay.


#8

Updated to ios9 and is working much better, was an ios bug it seems so, i thought was something from webflow. Question: where did you get the ios supported and not supported graph? Is in webflow somehow?


#9

That's from www.caniuse.com. If you're not familiar with it, I highly recommend becoming best friends with it.

It's saved my ass many times for debugging, and also help a lot when clients want to use some fancy thing in a old browser, and I can show them how it will/won't work without having to go to browserstack and loading the page a million times.

FWIW, I'd say you always want to include a max and min height when using VH and VW. Proxy browsers, like Opera Mini, will not be able to interpret viewer based units as they load all of their content on an external server. Don't know if that's already something that you know, but I was using VH units for a while without thinking about that and it came around to bite me.


#10

I had the same issue. You really have to be using IOS8 or higher for the VW/VH properties to work.


#11

Thanks for the tips, really appreciate it! Thumbs Up!


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.