Page 1 of 1
Safari does not scale layoutgrid to 100vh
Posted: Mon Oct 21, 2019 12:11 pm
by piotrh
Pablo,
First layout grid on my page is set to 100vh and looks good in firefox, chrome and edge.
Safari does not scale layergrid to 100vh. How can I fix this?
Re: Safari does not scale layoutgrid to 100vh
Posted: Mon Oct 21, 2019 2:13 pm
by Pablo
What is the URL of the page?
Re: Safari does not scale layoutgrid to 100vh
Posted: Mon Oct 21, 2019 2:27 pm
by piotrh
Its not finished yet, but here You can see the page I am having proplem with:
/link removed/
Re: Safari does not scale layoutgrid to 100vh
Posted: Mon Oct 21, 2019 2:41 pm
by Pablo
It seem to work correct for me.
Maybe you have an older version of Safari?
Note that this is a standard HTML feature, so it's not up to WWB whether or not it works.
Re: Safari does not scale layoutgrid to 100vh
Posted: Mon Oct 21, 2019 3:06 pm
by piotrh
Im using last avalible safari build for windows. This might be the reason.
I have no option to check this on mac, but if You say its looks ok – I'ts fine for me
.
Thank You
P
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Oct 22, 2019 1:22 pm
by piotrh
I have another problem with this page:
this time its how it is displayed on my tablet. When my tablet is in portrait orietation it displays my 780px breakpoint and its fine.
In landscape position it displays my default page - but it does not scale my background to cover the view (as it does correct on desktop computer).
How can I fix this?
/link removed/
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Oct 22, 2019 1:41 pm
by Pablo
There is no fix, some mobile browner just do not support this functionality.
See also:
https://caniuse.com/#feat=background-attachment
(known issues)
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Oct 22, 2019 2:33 pm
by piotrh
Is there a way to have a layer as fixed, not scrollable background to trick this issue?
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Oct 22, 2019 2:57 pm
by Pablo
Not as far as I know.
Re: Safari does not scale layoutgrid to 100vh
Posted: Mon Nov 04, 2019 5:01 pm
by piotrh
Hello Pablo,
I found out simple fix that seems to work fine on my mobile device.
I put height: 100vh; here:
body
{
background-color: #FFFFFF;
background-image: url(images/big7pat2.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
background-size: cover;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
line-height: 1.1875;
margin: 0;
text-align: center;
}
I do it manually after page export. Is there a way to do this inside WWB?
P
Re: Safari does not scale layoutgrid to 100vh
Posted: Mon Nov 04, 2019 6:11 pm
by Pablo
You can add custom code in the Page HTML.
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Nov 05, 2019 6:58 am
by piotrh
Yes, but I tried and there seems to be no way to place it so I can style body element... Like here:
<!doctype html>
<html height: 100vh;>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 15 -
http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: #FFFFFF;
background-image: url(images/big6.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
line-height: 1.1875;
margin: 0;
padding: 0;
}
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Nov 05, 2019 7:24 am
by Pablo
You can put styles between the <head> tags.
Code: Select all
<style>
body
{
height: 100vh;
}
</style>
Re: Safari does not scale layoutgrid to 100vh
Posted: Tue Nov 05, 2019 8:18 am
by piotrh
Thank You!