IMG's vallen buiten kader in Safari - object-fit: cover

[snsgn]

Hoi iedereen,

Ik heb een probleempje waar ik niet uit kom. Ben namelijk een ontwerper zonder Mac, ja die bestaan.
Nu is het dus zo dat mijn portfoliowebsite die ik een week geleden heb gelanceerd in elke browser goed werkt, behalve in Safari.

Zie hier.
Ik maak gebruik van object-fit: cover; om de img's met variabele formaten in het grid item te stoppen.
Voor degenen die Safari hebben, alleen die kunnen mij helpen, tenzij je OSX in VM kan draaien o.i.d.
Zoals jullie zien is er niks aan de hand in andere browsers, maar in Safari vallen de img's buiten het kader.
Oja, ik zie hier ook dat Safari dit gewoon zou moeten trekken: caniuse.com/#feat=object-fit. Dus weet niet wat het probleem veroorzaakt.

Ik hoop heel graag dat iemand mij kan helpen!

Alvast bedankt,
snsgn

[ Voor 12% gewijzigd door snsgn op 21-02-2017 23:29 ]

[Toxic_Dreams]

http://prntscr.com/ebrkqe

Dat is wat ik momenteel te zien krijg

[snsgn]

Toxic_Dreams schreef op dinsdag 21 februari 2017 @ 23:27:
http://prntscr.com/ebrkqe

Dat is wat ik momenteel te zien krijg

fixed

[Toxic_Dreams]

snsgn schreef op dinsdag 21 februari 2017 @ 23:29:
fixed

In .grid__item img moet
Background-position: cover;
neem ik aan sowieso
Background-size: cover;
zijn

Vind het wel interessant, ga hier even safari voor downloaden

[snsgn]

Toxic_Dreams schreef op dinsdag 21 februari 2017 @ 23:34:
[...]


In .grid__item img moet
Background-position: cover;
neem ik aan sowieso
Background-size: cover;
zijn

Vind het wel interessant, ga hier even safari voor downloaden

Oja klopt, dank! En fixed.

Bedankt voor de moeite alvast.

[Toxic_Dreams]

http://prntscr.com/ebrst5 volgens mij een beetje een oude versie Ik weet dat Apple Safari niet meer update / onderhoud voor Windows, maar is 5.1.7 de laatste versie?

[snsgn]

Toxic_Dreams schreef op dinsdag 21 februari 2017 @ 23:47:
http://prntscr.com/ebrst5 volgens mij een beetje een oude versie Ik weet dat Apple Safari niet meer update / onderhoud voor Windows, maar is 5.1.7 de laatste versie?

Ik heb dit zelf ook al gedownload, die versie is uit 2012, dus dat maakt me niet zo uit.
Het gaat echt om de laatste Safari. Daarop ziet het er zo uit: browsershots.org

[Toxic_Dreams]

Heb je dit ook gecontroleerd op een eigen Apple device? Wie weet ziet het er dan anders uit.. Zelf heb ik geen Apple apparaten en dus ook niet de mogelijkheid het hier op te bekijken.

Voor de rest zie ik ook niks raars in de code, lijkt mij allemaal te kloppen. Hopelijk kan iemand ( die wel over een Apple device beschikt ) je wel helpen, veel succes nog in ieder geval!

[snsgn]

Toxic_Dreams schreef op dinsdag 21 februari 2017 @ 23:56:
Heb je dit ook gecontroleerd op een eigen Apple device? Wie weet ziet het er dan anders uit.. Zelf heb ik geen Apple apparaten en dus ook niet de mogelijkheid het hier op te bekijken.

Voor de rest zie ik ook niks raars in de code, lijkt mij allemaal te kloppen. Hopelijk kan iemand ( die wel over een Apple device beschikt ) je wel helpen, veel succes nog in ieder geval!

Mja, anders had ik dit topic niet gemaakt... Ik heb 700 bezoekers gehad na de launch. 12,5% was vanuit Safari. Ik kreeg reacties op de fout, dus vandaar.

[ Voor 9% gewijzigd door snsgn op 21-02-2017 23:59 ]

[JJ93]

Op Safari gaat het niet goed met de object-fit. Zonder de object-fit klopt de hoogte en breedte (maar aspect ratio van afbeelding niet). Met object-fit klopt de aspect ratio maar is de afbeelding een aantal pixels breder/hoger.

Denk dat het simpelste is om het te fixen door de img in een div te plaatsen, en dan de width/height van de div vastzetten, overflow:none en de afbeelding zelf 100% width/height van de div met object-fit cover.

[q-enf0rcer.1]

Hoewel ik geen idee heb waarom dit niet lekker werkt, is er in principe wel een eenvoudige oplossing met naar mijn weten meer cross-bower support:

code:

// html
<div style="background-image: url(pad/naar/je/afbeelding.jpg);" class="cover"></div>
// css
.cover {
background-size: cover;
height: 100%;
width: 100%;
}

Ik weet in ieder geval zeker dat background-size: cover; wel het correcte gedrag vertoond in Safari. Aangezien ik dit op dezelfde manier recent in een project heb gebruikt.

Edit: ik heb je code even geinspecteerd, en je blijkt iets wat heel gemakkelijk is helaas heel moeilijk te maken, de oplossing zit ergens hier:

https://cl.ly/0R3f0m2q3j3y

Als je nog een div om de grid_items heen zou kunnen zetten is er ook een oplossing mogelijk zonder calc functie. Het probleem heeft dus niet te maken met object-fit

[ Voor 28% gewijzigd door q-enf0rcer.1 op 22-02-2017 17:29 ]

[snsgn]

Bedankt JJ93 en q-enf0rcer.1, zal ik nu gaan voor de div om de img? of om de a? Of de calc functie? De tweede optie lijkt me minder netjes en minder zekerheid dat het dan ook echt goed is.

[q-enf0rcer.1]

Als je zelf volledige controle hebt over de HTML dan zou ik voor optie 2 gaan, namelijk het plaatsen van een div om de anchor tags. Dan kun je zonder de calc functie hetzelfde bereiken door de anchor tag middels box-sizing 100% breedte en hoogte te geven en dan padding van 8px te gebruiken op alle kanten.

Dan krijg je zoiets:

code:

<!-- voor elk grid item -->
<div class="grid-item">
<a href="#">rest van de html hier</a>
</div>

.grid-item { width: 25%; min-height: 300px; position: relative; };
.grid-item > a { display: block; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; position: absolute; top: 0; left: 0; }

[ Voor 3% gewijzigd door q-enf0rcer.1 op 23-02-2017 12:48 ]

[snsgn]

q-enf0rcer.1 schreef op donderdag 23 februari 2017 @ 12:48:
Als je zelf volledige controle hebt over de HTML dan zou ik voor optie 2 gaan, namelijk het plaatsen van een div om de anchor tags. Dan kun je zonder de calc functie hetzelfde bereiken door de anchor tag middels box-sizing 100% breedte en hoogte te geven en dan padding van 8px te gebruiken op alle kanten.

Dan krijg je zoiets:

code:

<!-- voor elk grid item -->
<div class="grid-item">
<a href="#">rest van de html hier</a>
</div>

.grid-item { width: 25%; min-height: 300px; position: relative; };
.grid-item > a { display: block; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; position: absolute; top: 0; left: 0; }

Ik heb volledige controle. Ik heb deze layout zelf compleet gestript. Misschien iets teveel gestript of zo.

Was toevallig net begonnen, met de calc-oplossing is er ineens een witruimte rechts naast de rechter items.

Is deze oplossing die je nu geeft goed te doen in de fluid layout? De items zijn namelijk niet allemaal 25%. Ze schalen gewoon mee aan je browservenstergrootte. Zie onderaan in CSS bestand. 20% voor 5 items naast elkaar, 25 voor 4, 33 voor 3, etc.

[snsgn]

Ok, update, ik heb hier de calc-oplossing, met hier het resultaat van browsershots.org, werkt dus niet?

Hier de div oplossing die je zojuist hebt gegeven, hier het resultaat van browsershots.org. Eh.. werkt ook niet
In Firefox zijn nu iig de teksten in de anchors naar boven geplaatst, zucht, weer een nieuw probleem.

[ Voor 14% gewijzigd door snsgn op 23-02-2017 13:27 ]

[q-enf0rcer.1]

Heb zo te zien zelf toch ook wat foutjes gemaakt, dit komt een stuk dichter in de buurt:

code:

.grid-item { width: 25%; min-height: 300px; position: relative; box-sizing: border-box; padding: 8px; };
.grid-item > a { display: block; width: 100%; height: 100%; }

[ Voor 23% gewijzigd door q-enf0rcer.1 op 23-02-2017 14:06 ]

[snsgn]

q-enf0rcer.1 schreef op donderdag 23 februari 2017 @ 14:04:
Heb zo te zien zelf toch ook wat foutjes gemaakt, dit komt een stuk dichter in de buurt:

code:

.grid-item { width: 25%; min-height: 300px; position: relative; box-sizing: border-box; padding: 8px; };
.grid-item > a { display: block; width: 100%; height: 100%; }

Ok, dit werkt dus. browsershot

Maar... er zijn nu 2 problemen.
- De animatie van het openen van een item begint nu linksboven in plaats van vanaf het item (zie huidige homepage om te zien hoe het wel moet).
- Als je de browser nu eens resized naar wat kleiners gaat ie compleet kapot met < 3 items naast elkaar. Dan zet ie er ineens 4 naast elkaar, maar dan heel smal. Nóg weer kleiner dan dat gaat het ineens weer goed (tablet/phone formaat enzo). fixed.

Echt, als je dit allemaal kan fixen kom ik een paar lekkere biertjes naar je brengen als je niet te ver woont

[q-enf0rcer.1]

Heb je dit al opgelost? Lijkt goed te werken bij mij in Safari!

Die biertjes wil ik natuurlijk wel

Edit: zie het probleem nu toch, de oplossing is om position: relative te verwijderen van .grid_item

[ Voor 57% gewijzigd door q-enf0rcer.1 op 23-02-2017 16:23 ]

[snsgn]

Ik snap even überhaupt niet waarom de tussenruimten van de grid__item's niet gewoon met een margin zijn gemaakt, heb nu even dit geprobeerd.

Op de img's zat padding = nu weg.
Op .grid__item::before zat top,right,bottom,left: 8px = nu weg.
Gewoon margin van 8px aan grid__item gegeven.

Even zien hoe ik nu die witruimte rechts weg krijg, snap nog niet hoe die daar komt.

Even browsershots screen afwachten.

[q-enf0rcer.1]

Dat werkt niet in combinatie met percentages.

Stel jij hebt 4 divs naast elkaar met width: 25%; en margin: 0 8px 0 8px;, dan is de het totaal feitelijk 100% + (16x4). Dan valt de content dus buiten de container breedte en passen er minder items naast elkaar dan je verwacht.

[ Voor 27% gewijzigd door q-enf0rcer.1 op 23-02-2017 16:57 ]

[Albinoraptor]

Je hebt je items 20% breed, maar vervolgens geef je ze 8px margin, dus nu passen er geen 5 items meer in je Grid-section. Gebruik ipv margin een border van 8px en dan passen er mooi 5 naast elkaar.

Too late

[ Voor 7% gewijzigd door Albinoraptor op 23-02-2017 16:57 ]

[q-enf0rcer.1]

Border oplossing zou overigens ook kunnen werken, in mijn eerdere test bleek dit echter een nieuw probleem op te leveren. Ongetwijfeld ook te fixen.