Problem mit Darstellung Top Link Button nur unter Firefox

[Seefahrer]

Hallo zusammen,

ich habe auf meiner Seite "https://www.luetten-dieks.eu" mittels JQuery Template (j_top_link.html5) einen animierten Toplink Button realisiert und eingebunden, der sich einblendet, wenn der Besucher mehr als 200 px runterscrollt.
Das funktioniert soweit auch einwandfrei unter Safari, Chrome, Opera (jeweils macOs, Windows keine Ahnung). Klicke ich auf den Button, scrollt die Seite nach oben, der Button blendet sich aus und beim nächsten nach unten scrollen erscheint er wieder in seinem "definierten CSS", z.B. mit opacity:0.6

Unter Firefox funktioniert es im Prinzip auch, nur habe ich NUR dort das Phänomen, dass der Button nach dem Anklicken "aktiv" bzw. im "hover" Status bleibt. Zwar verschwindet er ebenfalls nach dem nach oben scrollen wie er es soll, scrolle ich dann jedoch wieder mehr als 200px nach unten, wird er im "hover-Status" ohne jede Animation wieder eingeblendet (dotted outline drumherum). Erst wenn ich dann irgendwo ins Browserwindow klicke, nimmt der Button wieder sein ursprüngliches CSS an ...

Ich hoffe, ich konnte mich verständlich machen ... Hat irgendwer eine Idee, woran das liegt?

[Doro]

Hallo Seefahrer,
mit einem Firefox 60.0.1 auf Mac 10.11.6 kann ich das nicht gestätigen, er fadet wunderbar ein und auch wieder aus. Finde es sehr gut gemacht dort noch den Hinweis "nach oben" mit einzublenden. Hilft Dir jetzt vielleicht nicht wirklich weiter, aber das ist was ich testen konnte.
Viele Grüße Doro

[fusch]

Hallo Seefahrer,

Du kannst den Zustand über .top_link:focus stylen. Mit outline:0 bekommst Du den Rahmen weg. Da :focus aber für die Barrierefreiheit wichtig ist, solltest Du auf jeden Fall einen :focus-Style einfügen, um die Zustände unterscheiden zu können.

Gruß
Hella

[Seefahrer]

Danke für Deinen Test ...

Hm, habe bei mir auf 2 Rechnern den gleichen Effekt, FF 60.0.1 und MacOSX 10.11.6 bzw. macOs 10.13.4:

Button blendet ein und erhält nach dem Klicken eine gepunktete Linie "umzu", der Text "nach oben" bleibt ausgefahren und Opacity:1. Die Seite scrollt nach oben und der Button wird ausgefadet.
Nach erneutem Herunterscrollen wird der Button im genannten Zustand ohne Animationen wieder eingeblendet, d.h. gepunktete Linie, Text ausgefahren etc. und es gibt keine Animationen.

Das geschieht nur im Firefox, unter Safari, Chrome, Opera verhält sich der Button wie gewünscht und wird animiert wieder eingeblendet. Das CSS scheint ok zu sein, wenn ich das JQuery template im Seitenlayout deaktiviere, wird nur mittels des Html-Moduls auf "#top" gesprungen. Dabei verhält sich der Button auch unter FF wie gewünscht.

Ich habe das folglich das nachfolgende Jquery snippet im Verdacht:

<script>
$(document).ready(function() {
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
		    $('.top_link').fadeIn();
		} else {
		    $('.top_link').fadeOut();
		}
	});
    $(".top_link").on('click',function() {
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
	});
});
</script>

EDIT: mit "outline 0 :" bekomme ich zwar die gepunktete Linie weg, aber der Button bleibt im "focus" Status. Unter Chrome, Safari etc. funktioniert ja auch alles wie es soll.

Folgendes CSS für hover/focus

.top_link:hover,
.top_link:focus {
    opacity: 1;
    background-position-y: -138px;
    -webkit-transition: background-position-y 1s cubic-bezier(.35, .75, .59, .93);
    -moz-transition: background-position-y 1s cubic-bezier(.35, .75, .59, .93);
    -o-transition: background-position-y 1s cubic-bezier(.35, .75, .59, .93);
    transition: background-position-y 1s cubic-bezier(.35, .75, .59, .93);
    text-decoration: none; 
}

[Seefahrer]

Viel Googeln ergab, dass das genannte Verhalten des FF wohl ein bekanntes Problem ist.

Habe jetzt ein ".blur()" event in das JQuery snippet eingefügt, damit geht's:

<script>
$(document).ready(function() {
	$(window).on('scroll', function(){
		if ($(this).scrollTop() > 200) {
		    $('.top_link').fadeIn();
		} else {
		    $('.top_link').fadeOut();
		}
	});
    $('.top_link').on('click',function() {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
        $('.top_link').blur();
        return false;
	});
});
</script>