Strona wyświetla się prawidłowo w Chrome, ale w Firefoxie już nie

pytanie zadane 6 października 2015 w HTML i CSS przez DavidMCPolska Bywalec (2,770 p.)
edycja 6 października 2015 przez DavidMCPolska

Moją stronę testuję w Google Chrome, dzisiaj wszedłem na Firefoxa i od razu widać, że to jest to samo co Internet Explorer! (Internet Explorer gorszy, bo nie ma czcionek) Nie ma animacji, czcionek w submicie i stylowania scrollbara. Nie wiem o co chodzi.

2 odpowiedzi

odpowiedź 6 października 2015 przez Kamilogik Obywatel (1,280 p.)

Całkiem możliwe, że niektóre elementy strony stworzyłeś w taki sposób, że tylko Google Chrome wie o co chodzi. Takie zjawisko ma najczęściej miejsce przy użyciu nowszych technologii lub bezmyślnego kopiowania kodu z internetu. A skoro o kodzie mowa to ciężko cokolwiek stwierdzić nie mając do niego dostępu.

Wstaw link do strony (ostatecznie jeśli kod nie za długi wstaw na wklej.org) i sprecyzuj co konkretnie nie działa to przeanalizujemy.

komentarz 6 października 2015 przez DavidMCPolska Bywalec (2,770 p.)
edycja 6 października 2015 przez DavidMCPolska

Wystarczy wklejenie kodu animacji?

.guzik:hover
{
  animation: guzik-hover 250ms;
  animation-fill-mode: forwards;
}
@keyframes guzik-hover
{
  0% {background-image: url(../Zasoby/Button.png);}
  100% {background-image: url(../Zasoby/ButtonHover.png);}
}

Przykładowa animacja.

Lista rzeczy które nie działają:

- Animacje
- Czcionka w input[type=submit]
- Pogrubienie czcionki jakieś takie słabe
- Stylowanie głównego scrollbara

Adres strony: http://geometrycraft.tk

komentarz 7 października 2015 przez rafal.budzis Szeryf (85,700 p.)

@ Drozdek Chcesz zeby to działało to animuj opacity (przezroczystość) tylko bedziesz potrzebował dwóch znaczników które bedą na sobie. (mozna wykorzystać after i before)

potem zmieniasz temu z góry opacity na 0 to bedziesz miał widoczny ten pod spodem.

komentarz 7 października 2015 przez DavidMCPolska Bywalec (2,770 p.)

Co mi to da jak nie wiem jak zrobić wtedy z tego animację po najechaniu myszką? Wiesz jak to zrobić?

komentarz 8 października 2015 przez rafal.budzis Szeryf (85,700 p.)

Mozesz zrobic tak samo @keyframes powinny bez problemu działac na wartościach liczbowych z wartościami url zawsze są problemy.

@keyframes guzik-hover
{
  0% {opaciti:0;}
  100% {opaciti:1;}
}

lecz prostrzym sposobem jest ustawienie przejścia w danym guziku

.guzik{
   opacity:0;
   transition:opacity 1s linear 0s;/*ustawia przekształcanie opaciti*/
}
.guzik:hover{
   opacity:1;
}

komentarz 8 października 2015 przez Czort Nałogowiec (32,500 p.)

Zdecydowanie keyframes jest zbędny w tym przypadku.

odpowiedź 6 października 2015 przez radek024 Szeryf (77,160 p.)

Są tu dwie ważne różnice: - Chrome stopniowo wypiera wszelkie dodatkowe wtyczki: Flash, Silverlight, QuickTime i tym podobne. Zależy im, aby internet skupił się na pisaniu wszystkiego w html5(youtube z tego co mi się wydaje, wykorzystuje już w pełni htmla5 dla chrome, dla firefoxa trudno powiedzieć), - Firefox i Chrome to dwa różne silniki; Firefox opiera się na WebKit'ie(taki silnik używała kiedyś opera, używa IE i Edge oraz Safari), a Chrome na Chrominium(autorski silnik od Google'a - teraz używa go Chrome, Viwaldi, Opera). Tak jak pisałem, impentacja htmla5 ze strony google'a idzie pełną parą, a programiści od Mozilli także to robią, tyle że o wiele wolniej ;)

komentarz 6 października 2015 przez Patrycjerz Mędrzec (192,320 p.)

A czy silnikiem Chrome nie jest Blink: https://pl.wikipedia.org/wiki/Blink_(silnik)?

komentarz 6 października 2015 przez DavidMCPolska Bywalec (2,770 p.)

Trochę to nie sprawiedliwe, bo jak napisze się normalny kod to powinien działać na wszytkich przeglądarkach, a tutaj takiego nie można stworzyć, bo wtedy na tej przeglądarce coś nie pasuje, a tutaj chodzi ok itd.