[CSS] Bullet points voor navigatie en Firefox/Chrome

[ikt]

Op m'n homepage heb ik een zoekbalk, waarmee ik op Google, YouTube en Wikipedia kan zoeken. Om daartussen te wisselen doe ik wat met JavaScript en om bij de houden waar ik ben laat ik dat zien met bolletjes die worden gevuld.

Leuk en aardig, werkt prima. Als ik alles inklap wordt het zooitje echter platgedrukt in Firefox:


Pagina ingeklapt, bolletjes misvormd.


Pagina uitgeklapt, bolletjes goed!

In IE, Chrome en Edge gebeurt dit niet, enkel in Firefox. Komt voor op versie 49 (Release) en Nightly (nieuwste).

In Chrome flikkeren de bolletjes soms. Het is moeilijk reproduceerbaar en lijkt volgens mij ook enkel voor te komen als de rest is ingeklapt.

De broncode is te vinden op https://github.com/E66666666/homepage-alt

Het bolletje is altijd 16x16 pixels. Iemand een idee waarom dit gebeurt? Ik kan er absoluut niet tegen

Offtopic:
Firefox heeft ook veel moeite met de animaties, Chrome en Edge werken hier veel soepeler. Wordt het toch tijd om over te stappen?

[ Voor 9% gewijzigd door ikt op 20-10-2016 12:42 ]

[ikt]

Oh, ik ben toch maar alle properties langsgegaan in de CSS met de inspector. Uitvinken van font heeft geholpen, dus dit heeft het opgelost:

code:

.dotstyle {
    font-family: initial;
/* meer */
}

Wel eigenaardig, dat een fontje invloed heeft op die manier

[V-rg]

ikt schreef op donderdag 20 oktober 2016 @ 13:40:
Oh, ik ben toch maar alle properties langsgegaan in de CSS met de inspector. Uitvinken van font heeft geholpen, dus dit heeft het opgelost:

code:

.dotstyle {
    font-family: initial;
/* meer */
}

Wel eigenaardig, dat een fontje invloed heeft op die manier

Was even aan het kijken voor je maar zag dat je een reactie had geplaatst.

Als ik je website bekijk via Chrome dan zie ik dat het rondje ook niet zo perfect eruit ziet, eigenlijk exact hetzelfde zoals je hierboven liet zien, zelfs als ik via Inspector die font-family uitzet. Edge werkt het inderdaad wel gewoon.

Wat soms trouwens ook helpt is om dit toe te voegen: https://necolas.github.io/normalize.css/
Dit zorgt ervoor dat verschillende CSS instellingen wat meer sychroon lopen tussen verschillende browsers.

[ Voor 3% gewijzigd door V-rg op 20-10-2016 13:50 ]

[ikt]

Bedankt voor de tip! Ik heb normalize.css toegevoegd Hopelijk neemt dat het een en ander aan hoofdpijn weg.

Welk OS gebruik je? Chrome heeft hier op Windows 10 op beide mijn computers hetzelfde:
dat het blokje vierkant wordt wanneer ik hover met de muis over de header tekst en de [ ] haken zijn aan het animeren. (Zowel ingeklapt als niet)

[V-rg]

Ik gebruik zelf ook Windows 10 (Pro x64), laatste updates zelfde geld ook voor Chrome gewoon de laatste versie.

Dat het vierkant wordt was me ook opgevallen... wat me dan ook opvalt is dat het rondje aan de onderkant af wordt gekapt op zelfde lijn zit als de onderkant van dat vierkantje. Misschien helpt het door gewoon het rondje te laten maken door een "border: 2px solid #fff;" en daarop border-radius 50% op te zetten? (geen idee als het daadwerkelijk het probleem oplost)

[ Voor 5% gewijzigd door V-rg op 20-10-2016 16:48 ]