firefox svg problem skali szarości - obraz się zaciera i przesuwa

Używam następujących CSS, aby uzyskać efekt skali szarości na zawisie. Problem w Firefoksie polega na tym, że nieco rozmywa obraz, a także przesuwa go w prawo o 1-2 piksele. Nie jestem pewien, dlaczego tak się dzieje.firefox svg problem skali szarości - obraz się zaciera i przesuwa

Czy to nieodłączny problem? Jak mogę to rozwiązać?

.zd-stack img:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
             /* Firefox 10+ */ 
    filter: gray;      /* IE6-9 */ 
    -webkit-filter: grayscale(100%);  /* Chrome 19+ & Safari 6+ */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */; 
}

Chcę używać CSS, ale nie wiem jak poprawić ten drobny problem!

Źródło

2013-05-07 Devender Bhandari

jeśli naprawdę uważasz, że to jest problem proszę podnieść błąd http://bugzilla.mozilla.org –

wydaje się, że błąd dotyczy tylko firefox, kiedy usuwam tę konkretną linię css przeznaczoną dla ff i dodam inny styl zawisu wydaje mi się . Coś związanego z domeną css w domenie krzyżowej? ... ale na razie usunąłem ją. –

Czy to Twoja odpowiedź? http://stackoverflow.com/a/32391958/241291 – cobaltduck

Problem między skalą szarości Firefoksa i SVG wydaje się być teraz naprawiony.

Zobacz skrzypce z próbki kodu: https://jsfiddle.net/tzi/rjotsz0p/

Firefox obsługuje grayscale() filtr od wersji 35 (styczeń 2015), dzięki czemu można teraz mają znacznie lepszą wersję tego kodu:

.zd-stack img { 
    transition: filter .6s ease;   /* Standard (all but IE10+) */ 
} 

.zd-stack img:hover { 
    filter: gray;      /* For IE6-12 */ 
    filter: grayscale(100%);    /* Standard (only FF35+ & IE13+) */ 
    -webkit-filter: grayscale(100%);  /* For Chrome, Safari & Opera */ 
}

Zobacz skrzypce z tego nowego kodu: https://jsfiddle.net/tzi/x6xcx68g/

Źródło

2015-12-23 10:30:27 tzi

firefox svg problem skali szarości - obraz się zaciera i przesuwa

Odpowiedz

Powiązane problemy