flexslider heeft invloed op de weergaven van de fonts

[MekZi]

Hallo allemaal,

Ik heb de flexslider toegevoegd aan mijn (nog static) webpagina. Alleen gebeurd er nu iets raars en ik kan mij niet bedenken waar aan het zou kunnen liggen.
Voorbeeld op: beta [dot] qmodo [dot] nl

Wanneer de slider van plaatje veranderd, gebeurd er wat met de fonts op de pagina. Ze worden namelijk "dunner" en dan vervolgens terug in de originele staat in een fractie van een seconden.

Dit gebeurd (mac) met safari en chrome (beide webkit), maar niet met firefox (gecko).

Heeft iemand eerder iets dergelijks tegengekomen? Ik gebruik google fonts en dacht dat het misschien daar aan lag. Maar na het verwijderen van de google-font uit de css bleek dat niet zo te zijn.

[Wary87]

Ik kan het effect niet terugzien op de opgegeven website (chrome, safari op een windows PC). Maar na de informatie in de post zou ik eens scannen met firebug op transitions of de manier waarop je custom fonts aanroept.

[RobIII]

Ik vermoed dat er ergens iets met opacity (of soms ook zoom dacht ik) gedaan wordt. Misschien is het handig(er) als je even een (uitgeklede) testcase maakt.

[MekZi]

Ahaa, ik heb het nog niet doorgenomen, maar hier wordt het zelfde probleem vastgesteld. Het ligt niet aan flexslider, maar aan de combinatie van transitions en elementen die geen static zijn.

Kwam er achter nadat ik een testcase pagina maakten en ik daar in chrome de elementen een voor een uit vinkte. Nadat ik de position: relative uit vinkte was er niks aan de hand.

Ik ga het eens uitvoerig doornemen en er zou ook een oplossing voor zijn.

Edit:
Niet echt een oplossing die ik nu kan gebruiken. Iemand een idee? (Zal de official flexsite site een mail sturen.)

edit2:
Twee "soort" van oplossingen gevonden:
1. De volgende css gebruik:

code:

html { -webkit-font-smoothing: antialiased; }

Dit zorgt er echter voor dat de text er in webkit browser's dunner uit komen te zien (te dun naar mijn smaak).

2. Geen css3 transition gebruiken:

code:

  <script type="text/javascript">
  $(window).load(function(){
    $('.sliderbox').flexslider({
      animation: "slide",
      useCSS: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
  });
  </script>

Het gaat hier dan vooral om de useCSS die op false wordt gezet. Er wordt dan geen css3 transitions meer gebruikt. Nadeel is dat ik niet weet wat dit aan performance kost? Hij moet op tablets en telefoon te gebruiken zijn (flexslider heeft een swipe functie). Er zal in de toekomst een mobile webpagina komen, maar echt is altijd handig om de "full" website experience te hebben.

edit3:
Bij useCSS: false kan je met een tablet nog steeds swipen, echter zie je pas een animatie nadat je de vinger los laat. Met useCSS: true zie je dus een vloeiende animatie (Je beweegt je vinger van links en naar rechts en de slider volgt je vinger. Je kunt dus de helft van de eerste en de tweede slide zien.).

[ Voor 78% gewijzigd door MekZi op 19-11-2012 21:48 ]