Hallo
Via css ( scale ) laat ik een afbeelding een beetje vergroten.
De code kunnen jullie hier vinden : http://www.zoekies.com/scale.php ( alles staan in de bron )
Wanneer de afbeelding vergroot is en de muis blijft staan verspringt de afbeelding een beetje ( Firefox )
Wanneer ik een veel grotere scale invul, dan heb ik dat probleem niet ... ik zoek me suf op dit schoonheidsfoutje.
Heeft iemand hier een oplossing voor? Alvast bedankt!
Groeten
Wesley
- CSS scale : afbeelding versprint een aantal pixels in Firefox
-
23-06-2015, 13:32 #1
- Berichten
- 940
- Lid sinds
- 15 Jaar
CSS scale : afbeelding versprint een aantal pixels in Firefox
-
In de schijnwerper
Commerciële berichten plaatsen? Het kan nu bij onze nieuwssites!AdvertentieruimteUltratekst: Flinke kortingen op teksten, GEEN AI!Freelance / WerkComplete domeinnamen portfolio te koop wegens voorlopig stoppenDomein te koopMuseum Keuze | 580 musea | DR 29 (ideaal voor linkbuilding)Website te koop -
23-06-2015, 14:08 #2Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Hier kun je weinig aan doen.
"After some ardent research, this is a known issue with Firefox's sub-pixel rendering. [...] The phenomenon is referred to as "pixel snapping" and it occurs rather frequently in Firefox's animation, particularly at the conclusion of a transition."
Wat je kunt proberen:
"The solution is to add rotate(0.0001deg) to the scaling transform. This greatly reduces the effect but does not entirely eliminate it."
Lees Strange Pixel Shifting / Jumping in Firefox with CSS Transitions
-
23-06-2015, 15:06 #3
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Fijn wanneer een oplossing zo simpel is! Bedankt voor de tip!
Ik zie nu dat het script in zijn geheel niet werkt op IE8.
Kan ook makkelijk opgelost worden?
Hier kun je weinig aan doen.
"After some ardent research, this is a known issue with Firefox's sub-pixel rendering. [...] The phenomenon is referred to as "pixel snapping" and it occurs rather frequently in Firefox's animation, particularly at the conclusion of a transition."
Wat je kunt proberen:
"The solution is to add rotate(0.0001deg) to the scaling transform. This greatly reduces the effect but does not entirely eliminate it."
Lees Strange Pixel Shifting / Jumping in Firefox with CSS Transitions
-
23-06-2015, 15:49 #4Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Transform is een CSS3 property en IE 8 ondersteund dat niet: http://caniuse.com/#feat=transforms2d
De oplossing: IE8 niet meer ondersteunen.
IE 8 wordt volgens caniuse.com wereldwijd nog maar door 2,19% gebruikt.
Richt je je op de Nederlandse markt dan is dit zelfs nog maar 0,69%.
Zelfs al wil je IE8 blijven ondersteunen (wat ik niet doe) dan nog zou ik de effectjes weg laten (de site werkt prima zonder fancy animaties).
Er zijn wel workarounds om het op IE8 werkbaar te krijgen maar dat zijn vaak "lelijke" oplossingen. Ze werken op jou moderne pc prima als je test via IE8. Maar je moet niet vergeten dat de échte pc's in het wild die nog IE8 gebruiken vaak oude barrels zijn met weinig kracht. Het effectje vraagt vaakt zoveel resources van die oude pc dat het de website traag maakt.
Ik heb vroeger (net als jij nu) uren zitten knooien om dit soort dingen in oude browsers te laten werken. Neem van mij aan: het is het niet waard en je moet het niet meer willen. Bekijk voor de gein Google.nl eens in IE8, zelfs zij ondersteunen het niet meer.
-
23-06-2015, 16:06 #5
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Dat is een overtuigende uitleg! Ik ga uw redenering dan ook volgen.
Het lijkt me niet verstandig om zulke animaties op oude, zwakkere computers te gebruiken.
Ik kan die CSS3 gewoon invoegen en die zullen genegeerd worden door niet compatibele browsers?
Transform is een CSS3 property en IE 8 ondersteund dat niet: http://caniuse.com/#feat=transforms2d
De oplossing: IE8 niet meer ondersteunen.
IE 8 wordt volgens caniuse.com wereldwijd nog maar door 2,19% gebruikt.
Richt je je op de Nederlandse markt dan is dit zelfs nog maar 0,69%.
Zelfs al wil je IE8 blijven ondersteunen (wat ik niet doe) dan nog zou ik de effectjes weg laten (de site werkt prima zonder fancy animaties).
Er zijn wel workarounds om het op IE8 werkbaar te krijgen maar dat zijn vaak "lelijke" oplossingen. Ze werken op jou moderne pc prima als je test via IE8. Maar je moet niet vergeten dat de échte pc's in het wild die nog IE8 gebruiken vaak oude barrels zijn met weinig kracht. Het effectje vraagt vaakt zoveel resources van die oude pc dat het de website traag maakt.
Ik heb vroeger (net als jij nu) uren zitten knooien om dit soort dingen in oude browsers te laten werken. Neem van mij aan: het is het niet waard en je moet het niet meer willen. Bekijk voor de gein Google.nl eens in IE8, zelfs zij ondersteunen het niet meer.
-
23-06-2015, 16:26 #6Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Dat is correct. CSS 3 wordt gewoon genegeerd als het niet wordt ondersteund.
-
23-06-2015, 16:27 #7
- Berichten
- 940
- Lid sinds
- 15 Jaar
-
23-06-2015, 18:20 #8
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Naar het schijnt zou het toch nog niet in orde zijn op IE11.
Helaas kan ik dat zelf niet testen ... de verspringing zou er nog zijn ...
-
23-06-2015, 22:40 #9
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: CSS scale : afbeelding versprint een aantal pixels in Firefox
Of eventueel alternatieven om dit effect te verkrijgen met jQuery ?
-
24-06-2015, 00:36 #10Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic