Viewport verschiebt sich bei focused Buttons welche nicht im Viewport liegen

[J o]

Moin.

Für fokusierbare Elemente welche nicht im Viewport liegen, jedoch durch die Fokusierung in den Viewport verschoben werden (translate), verschiebt sich der gesamte Viewport genau so weit, dass das Element an ursprünglicher Stelle sichtbar werden könnte.

Da die Beschreibung möglicherweise etwas verwirrend ist hier ein kleines Fiddle. Dabei bitte einen Button per Tabulator fokussieren und es sollte ersichtlich werden was gemeint ist.

Das dieses Verhalten logisch für den Browser ist leuchtet mir zwar ein aber ich finde keine Lösung um dieses zu unterdrücken.

Gruß
Jo

[marctrix]

Hej J,

Für fokusierbare Elemente welche nicht im Viewport liegen, jedoch durch die Fokusierung in den Viewport verschoben werden (translate), verschiebt sich der gesamte Viewport genau so weit, dass das Element an ursprünglicher Stelle sichtbar werden könnte.

Das dieses Verhalten logisch für den Browser ist leuchtet mir zwar ein aber ich finde keine Lösung um dieses zu unterdrücken.

Ich kann das bei mir (Safari/MacOSX) nicht nachvollziehen.

Dass das so für eine normale, öffentliche Website noch nicht verwendbar ist (weil eben nur mit der Tastatur benutzbar), ist dir vermutlich klar. - Sieht aber nett aus!

Marc

[J o]

Moin,

Dass das so für eine normale, öffentliche Website noch nicht verwendbar ist (weil eben nur mit der Tastatur benutzbar), ist dir vermutlich klar. - Sieht aber nett aus!

Im Zuge einer kleinen Überarbeitung im Hinblick auf Tastaturbenutzung ist mir das auch erst aufgefallen. Vorher hatte ich nur :hover auf das <nav>-Element und dort verschiebt sich nichts.

Schön das es bei Safari zu keiner Verschiebung kommt. In Chrome leider schon, mehr habe ich noch nicht getestet.

Gruß
Jo

[marctrix]

Hej J,

Schön das es bei Safari zu keiner Verschiebung kommt. In Chrome leider schon, mehr habe ich noch nicht getestet.

Tut es doch - nur halt nur beim ersten Mal, das war mir zunächst nicht aufgefallen.

Eine nicht getestete Idee hätte ich zum ausprobieren: Vermutlich würden negative Werte für position: absolute; die Elemente außerhalb des Viewports halten.

Also so was wie bottom: -5em;…

Marc