Weergave website in Safari op iPad

Henk48 · 8 mei 2021

Met de template Spectral van de website html5up.net wil ik wat gaan doen, maar ik merk dat de achtergrondfoto op mijn iPad 9,7” niet goed wordt weergegeven in Safari. Super ingezoomd. In Chrome is alles ok. Waar kan dat aan liggen en kan ik het op een of andere manier verhelpen?

Aar · 8 mei 2021

Ik denk dat je beter een voorbeeld kan geven, waarop we verder kunnen kijken naar de code.

Henk48 · 8 mei 2021

Ik gaf al aan om welke template het ging. Hier te vinden https://html5up.net/spectral
Werkt bij bij niet goed in Safari op iPad 9,7” Geen problemen in Chrome, en Safaro op iPad mini, Macbook en iMac.

krullenbol · 8 mei 2021

Op mijn iPad mini 4 werkt het goed met Safari maar niet met Firefox (iOS).
Eigenlijk vreemd want Firefox gebruikt dezelfde webkit als Safari op de iPad.

Kleine update: liggend gaat fout bij Firefox, staand gaat wel goed, Safari gaat beide goed

bron · 9 mei 2021

Dit is de werkelijke template https://html5up.net/uploads/demos/spectral/
De css code voor de styling is 4000 regels lang, pfff.

Heb je een screenshot wat er fout gaat?

Update. ik heb naar de leeftijd gekeken van de gebruikte scripts, die zijn behoorlijk oud
Er zit er zelfs eentje tussen die nog een "in development" status heeft en waarvoor geen updates meer zijn.

jquery.scrollex.min.js 0.2.1 2016
jquery.scrolly.min.js 1.0.0-dev 2015 (geen updates meer)
browser.min.js"> 1.0 2014
breakpoints.min.js 1.0 1018 (geen updates meer)

Die laatste (breakpoints.min.js) heeft hard-coded breakpoints voor de verschillende scherm views en mogelijk geeft die een probleem bij bepaalde OS/browser/scherm combinaties.. Breakpoints worden tegenwoordig niet meer in Javascript bepaald maar in de CSS. Ik las dat er een issue was met dit script en de maker (ajlkn) gaf als antwoord dat dit niet is te veranderen. Omdat het niet meer wordt gebruikt is het script end-of-life.

Henk48 · 9 mei 2021

Zo wordt de foto weergegeven op mijn iPad 9,7” in Safari

En hieronder de weergave met Chrome:

bron · 9 mei 2021

In de CSS van deze template wordt de background foto gecombineerd met een linear-gradient én met transparantie (zie CSS code hieronder). Volgens de specs geeft een linear-gradient samen met transparantie bij Safari en bij oudere Firefox onverwachte resultaten. Om dit te verhelpen zouden ze op verschillende lagen gelegd moeten worden maar dat is geen 123'tje.

Code:

body.landing #page-wrapper {
    background-image: -moz-linear-gradient(
        top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg
    );
    background-image: -webkit-linear-gradient(
        top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg
    );
    background-image: -ms-linear-gradient(
        top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg
    );
    background-image: linear-gradient(
        top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg
    );
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
}

Zie linear-gradient support bij Safari https://caniuse.com/?search=linear-gradient

bron · 9 mei 2021

Er is misschien een oplossing.

A) Download de achtergrondfoto: /spectral/images/banner.jpg
Open deze in een Paint programma en maak de fofo 50% ondoorzichtig.
Upload de foto naar de map waar die stond.

B) Download het css bestand: /spectral/assets/css/main.css
Open dit in Kladblok en zoek naar tekst: banner.jpg
Haal alle linear-gradients eruit, het ziet er dan zo uit:

Code:

body.landing #page-wrapper {
    background-image: url(../../images/banner.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    /* volgende 3 regels voor oudere browsers */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 0;
}

Upload het css bestand naar de map waar die stond.

Henk48 · 10 mei 2021

Helaas maken deze wijzigingen niets uit voor de weergave.

bron · 10 mei 2021

Een "fixed attached image" gebruikt de complete <body> afmeting. Dit kan in sommige mobieltjes voor sommige browsers (gek genoeg) erg lang zijn waardoor de foto helemaal wordt uitgerekt. Dit is ook te zien in de screenshots die je geeft.

Werkt dit misschien? Zet het onder de regel: body.landing #page-wrapper { ... }

Code:

/* achtergrondfoto alleen op webkit touchscreen */
@supports ( -webkit-touch-callout: none) {
  body.landing #page-wrapper {
    background-attachment:scroll
  }
}
/* achtergrondfoto op de rest */
@supports not( -webkit-touch-callout: none) {
  body.landing #page-wrapper {
    background-attachment: fixed;
  }
}

Henk48 · 10 mei 2021

Ook hiermee zie ik geen verschil ...

bron · 10 mei 2021

Of misschien beter dan de @media is dit

Zet direct onder <body> deze html, dit wordt de viewport voor de achtergrondfoto.

Code:

<div id="achtergrondfoto"></div>

Zoek in de css #page-wrapper op en verander dit zo:

Code:

/* alle foto css is van #page-wrapper verhuisd naar #achtergrondfoto */
body.landing #page-wrapper {
    padding-top: 0;
}
/* viewport voor de achtergrondfoto */
body.landing #achtergrondfoto {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    z-index: -1; /* deze regel kan denk ik weg */
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg);
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg);
    background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url(../../images/banner.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Henk48 · 10 mei 2021

En ook hiermee wordt de foto niet zichtbaar

bron · 10 mei 2021

Bij mijn post #12 moet, als de foto niet zichtbaar is, de grootte worden opgegeven.
Dit is het stukje html

Code:

<body class="landing is-preload">
    <!-- parallax foto in achtergrond -->
    <div id="achtergrondfoto"></div>
    <!-- Page Wrapper -->
    <div id="page-wrapper">

En dit toevoegen aan de css van mijn post #12

Code:

/* zet de body view op volledig zichtbaar */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
/* de content is langer dus hier een min-height */
body.landing #page-wrapper {
    min-height: 100%;
    padding-top: 0;
}
body.landing #achtergrondfoto {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    /* de volgende 2 regels kunnen denk ik weg */
    width: 100%;
    height: 100%;
}

Speel met de waarde bij z-index, die is van invloed of je de foto wel/niet ziet.

femke98 · 11 mei 2021

Ander thema nemen die up to date is?

Henk48 · 11 mei 2021

Waarschijnlijk gaat dat het wel worden, want tot nu toe lukt het me niet om het met alle adviezen goed werkend te krijgen.

Weergave website in Safari op iPad

Henk48

Gebruiker

Aar

Inventaris

Henk48

Gebruiker

krullenbol

Gebruiker

bron

Moderator

Henk48

Gebruiker

bron

Moderator

bron

Moderator

Henk48

Gebruiker

bron

Moderator

Henk48

Gebruiker

bron

Moderator

Henk48

Gebruiker

bron

Moderator

femke98

Meubilair

Henk48

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy