Logo verdwijnt bij klein breakpoint

Door - Ariën - op 26-01-2022 16:06 gewijzigd op 26-01-2022 16:07

3.321 views

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.

[img]https://i.ibb.co/b7Yrrnn/afbeelding.png[/img]
[img]https://i.ibb.co/qxKYn83/afbeelding.png[/img]

Iemand die een blik erop kan schijnen?

A Adoptive Solution

26-01-2022 17:28 gewijzigd op 26-01-2022 17:29

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

Ozzie PHP

26-01-2022 17:36

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 -

26-01-2022 17:38 gewijzigd op 26-01-2022 17:48

Goed gevonden. Ik ga eens kijken wat die daar doet. Maar waarom specifiek bij die svg? En enkel in webkit?

Ozzie PHP

26-01-2022 17:54

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 -

28-01-2022 16:39 gewijzigd op 28-01-2022 16:39

Ook met Javascript uit maakt het niks uit. Het logo blijft verdwijnen.
Dus wat zou er dan mis gaan?

Ozzie PHP

28-01-2022 18:07

Kun je eens tijdelijk die h1 weghalen die erboven staat en testen wat er dan gebeurt?

- Ariën -

31-01-2022 15:06

Binnen de DOM-inspectie in de browser gebeurt er niks positiefs en blijft het probleem.

Ozzie PHP

31-01-2022 15:59

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 -

31-01-2022 16:04 gewijzigd op 31-01-2022 16:08

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.

A Adoptive Solution

31-01-2022 16:50

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 :

<a href="/">
<h1 class="d-none">Treinenweb.nl</h1>
<img src="img/treinenweb.svg" alt="Treinenweb.nl">
</a>

door :

<img src="img/treinenweb.svg" alt="Treinenweb.nl" style="cursor:pointer" onclick="location.href='/'">

Reageren

Inloggen om te reageren