Does 100vh not work in safari in windows?

Question

The front page of a website I have been building to learn some web development works well in all browsers I have tested it on (windows) except safari. I have a html step such that i have sections styled to be 100vw and 100vh. On safari they appear to have a height of 0;

<body>
    <div id="wrapper">
        <div class="main">
            <section id="slide-one" class="slide"></section>
            <section id="slide-two" class="slide"></section>
.
.
.

And a summary of the css:

.slide {
    position: relative;
    padding-top: 0px;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

Any ideas what I am doing wrong?

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

5

You can try this

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    //alert('Its Safari');
    $('.main').css('min-height', '650px');
}

Although 100vh css property working on Mac default safari browser. But does not work properly in Safari in Windows.

Reference Link Detect Safari using jQuery

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 01 '16 at 11:34

Bipon Biswas

11,397
1
26
37

iphone safari crops web pages too:/ – oldboy Apr 08 '18 at 03:44

score 2 · Answer 2 · answered Feb 22 '16 at 19:36

2

The -webkit-height overrules the normal height, and because the value is 100% it will be as high as the .main. This only occurs in Safari (and maybe some other WebKitbrowsers), since Chrome doesn't recognise -webkit-height.

answered Feb 22 '16 at 19:36

LarsW

1,514
1
13
25

1

thanks for the fast response. Unfortunately this didn't make a difference though. Here is the website for your reference: www.teamthie.com – DB1500 Feb 22 '16 at 19:42
@DB1500 I can't test Safari, unfortunately. The only thing I can think of is the support for viewport units, but they're fine in Safari since 6.1, according to [Can I Use](http://caniuse.com/#feat=viewport-units). – LarsW Feb 22 '16 at 19:55
1

@DB1500 Great the website is actually up and running and can be checked! So many times devs/users post links to the website they currently work on and once the bug/error/question is answered/done the link is dead. Thank you. – lowtechsun May 29 '17 at 14:35

score 0 · Answer 3 · answered Oct 07 '16 at 08:19

0

Safari 5.1.7 is the last version of Safari developed for Windows. It came out before 2012 therefore it doesn't support most of new CSS3 properties.

answered Oct 07 '16 at 08:19

Lukáš Kraft

21
4

Does 100vh not work in safari in windows?

3 Answers3