Logo verdwijnt bij klein breakpoint

Overzicht

Sponsored by: Vacatures door Monsterboard

- Ariën -
Beheerder

- Ariën -

26/01/2022 16:06:02
Anchor link
Ik merk iets heel vreemd op aan mijn bootstrapped layout op mijn site.
Sinds ik pas geleden het logo heb aangepast naar een SVG, valt het hele logo weg op smalle breakpoints.

Bekijk de site maar eens op een desktop en maar het eens smaller. Of bekijk het eens op een tablet.

Met het oude logo (gebruik deze eens in de developer-mode van je browser: logo-308x60.png) werkte het prima.
Heeft Bootstrap moeite met SVG of iets dergelijks? Ik kan het niet achterhalen.

Ik kan wel met wat margins de logo weer op zijn plaats brengen, en dat voor deze breakpoint afdwingen, maar dat voelt als een ranzige hack.

Afbeelding
Afbeelding

Iemand die een blik erop kan schijnen?
Gewijzigd op 26/01/2022 16:07:49 door - Ariën -
 
PHP hulp

PHP hulp

22/12/2024 08:09:55
 
Adoptive Solution

Adoptive Solution

26/01/2022 17:28:34
Anchor link
Ik heb het gecontroleerd met diverse browsers op m’n iPad, maaar het logo staat op alle correct.

Bij 1 ingebouwde browser die automatisch js code verifieert stond dit.

Ja?
main.js:69

i frame gevonden
main.js:71
Gewijzigd op 26/01/2022 17:29:20 door Adoptive Solution
 
Ozzie PHP

Ozzie PHP

26/01/2022 17:36:57
Anchor link
Als ik het zo even bekijk doet het probleem zich voor in FireFox (webkit). Op het moment dat de afbeelding verdwijnt is de hoogte ervan 0.

Boven de svg staat een h1 die een class d-none heeft en verborgen is. Als ik die classnaam wijzig (in dev. mode) dan komt zowel die h1 als de img tevoorschijn. Wellicht kun je als test die d-none class verwijderen en vervangen door wat anders?
 
- Ariën -
Beheerder

- Ariën -

26/01/2022 17:38:48
Anchor link
Goed gevonden. Ik ga eens kijken wat die daar doet. Maar waarom specifiek bij die svg? En enkel in webkit?
Gewijzigd op 26/01/2022 17:48:56 door - Ariën -
 
Ozzie PHP

Ozzie PHP

26/01/2022 17:54:46
Anchor link
Goede vraag ... het zou een bug kunnen zijn, maar ook iets (bijv. een event listener) dat door de ene browser wel wordt opgepikt en de andere niet. Ik heb het zelf niet geprobeerd, maar schakel voor de grap javascript eens uit? Is het probleem er dan nog steeds?
 
- Ariën -
Beheerder

- Ariën -

28/01/2022 16:39:24
Anchor link
Ook met Javascript uit maakt het niks uit. Het logo blijft verdwijnen.
Dus wat zou er dan mis gaan?
Gewijzigd op 28/01/2022 16:39:48 door - Ariën -
 
Ozzie PHP

Ozzie PHP

28/01/2022 18:07:19
Anchor link
Kun je eens tijdelijk die h1 weghalen die erboven staat en testen wat er dan gebeurt?
 
- Ariën -
Beheerder

- Ariën -

31/01/2022 15:06:29
Anchor link
Binnen de DOM-inspectie in de browser gebeurt er niks positiefs en blijft het probleem.
 
Ozzie PHP

Ozzie PHP

31/01/2022 15:59:57
Anchor link
Het vreemde is dat als ik die classnaam d-none weghaal zowel de h1 als de img wordt getoond. Heb je die classnaam daar zelf gezet? Kun je die niet wijzigen door een andere custom classnaam en die dan op mobiel hiden via een mediaquery? Ik weet het niet zeker, maar het lijkt alsof die d-none roet in het eten gooit.
 
- Ariën -
Beheerder

- Ariën -

31/01/2022 16:04:34
Anchor link
Het is werk van de designer, maar toen werkte het nog met het oude logo. (Nieuwe logo komt niet bij diegene vandaan). Ik kan de designer eens vragen, maar ik vind het opvallend dat het enkel gebeurt met het replacen van de afbeelding naar een SVG.
De maten zijn enigszins anders, maar ik nam aan dat Bootstrap dat wel passend maakte.
Het lijkt wel alsof de h1 betrekking heeft op het logo? Is de h1 niet zichtbaar, dan is het logo ook verdwenen.

Ik zou een mediaquery kunnen gebruiken, maar dat klinkt in mijn ogen meer als een ranzige hack. Als het moet, dan moet het, maar ik blijf het maar vreemd vinden.
Gewijzigd op 31/01/2022 16:08:39 door - Ariën -
 
Adoptive Solution

Adoptive Solution

31/01/2022 16:50:11
Anchor link
Zoals eerder gezegd, geen probleem met browsers op m'n iPad.

Even gekeken met Firefox op Ubuntu.

Het beschreven probleem klopt.

In eerste instantie werkt het goed als je de link weghaalt.

Dus alleen met H1 en de afbeelding.

Wat de functie van H1 is ontgaat mij.

Maar dan kan je niet naar de Voorpagina.

Het werkt het goed als je dit vervangt :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<a href="/">
<h1 class="d-none">Treinenweb.nl</h1>
<img src="img/treinenweb.svg" alt="Treinenweb.nl">
</a>


door :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<img src="img/treinenweb.svg" alt="Treinenweb.nl" style="cursor:pointer" onclick="location.href='/'">
 
Ward van der Put
Moderator

Ward van der Put

31/01/2022 17:02:12
Anchor link
JavaScript gebruiken voor de hoofdnavigatie heeft nadelen:

https://developers.google.com/search/docs/advanced/guidelines/links-crawlable
 
- Ariën -
Beheerder

- Ariën -

31/01/2022 17:02:51
Anchor link
Het lijkt dus een bug te zijn met een: h1 heading met een img én de maten óf de SVG ondersteuning.
Opmerkelijk. Met jouw code en de onclick werkt het wel.

Die heading zal ik weg doen. Nutteloos of het is een SEO-iets, maar die alt zal ook moeten volstaan dan.

@Ward: Anders kan ik die onzichtbare heading met vóór de anchor van het logo zetten.
Ik weet nu waarin ik de oplossing moet zoeken. Maar ik snap alleen de bug niet echt :-P

Toevoeging op 31/01/2022 17:14:32:

Hm.... Aan die heading ligt het niet. Als ik die weglaat en ik gebruik een a-tag (anchor) dan verdwijnt het logo. Dus die anchor doet iets vreemds....

Hoe dan? Afbeelding
We zijn er dus nog niet.
Gewijzigd op 31/01/2022 17:15:10 door - Ariën -
 
Ozzie PHP

Ozzie PHP

31/01/2022 17:21:35
Anchor link
Hmmm, ik denk dat ik een oplossing heb gevonden.

Voeg eens een width toe aan de img ...

<img src="img/treinenweb.svg" alt="Treinenweb.nl" style="width: 280px;">

Ik vermoed dat Firefox geen 'fysieke' omvang herkent omdat het een svg is (die geen daadwerkelijke omvang heeft).
 
- Ariën -
Beheerder

- Ariën -

31/01/2022 17:30:36
Anchor link
Dat is het blijkbaar..... :-D
Thnx Ozzie!
 
Ozzie PHP

Ozzie PHP

31/01/2022 17:52:51
Anchor link
You're welcome ;-)
 
 

Dit topic is gesloten.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.