Antworten auf deine Fragen:
Neues Thema erstellen

Safari federt beim Scrollen nach und reisst Elemente auseinander, was tun?

draupnir

Moderator

Teammitglied
Hallo zusammen
ich habe bemerkt, dass Safari beim Scrollen nach ganz oben/unten gerne "nachfedert". Kann man das in HTML/CSS abschalten?

Bei mir reisst dieses Verhalten, das z.B. der Firefox nicht hat, kurzfristig Kopf und Inhalt einer Website auseinander, obwohl die Elemente genau aufeinander stehen.



Der css-Befehl
scroll-behavior: smooth | auto;​
scheint nicht die Lösung zu sein.

Irgendeine Idee, wie ich das lösen kann?
 

G

Gelöschtes Mitglied 746345

Guest

Bitte mal einen Link zu der Beispielseite oder einem Beispiel. Ich nutze selbst Safari (neben Firefox) und
wüsste jetzt auf Anhieb nicht, was du meinst.
 

draupnir

Moderator

Teammitglied
Hallo Freehand.

Da ich jetzt den Fachbegriff "Overscroll-behavior" kenne, habe ich den folgenden Clip gefunden:
Da seht ihr genau was ich meine.

Schönen Feiertag, für die, die den heute haben.
J.
 

draupnir

Moderator

Teammitglied
Leider nein, so wie es aussieht, ist das Problem zur Zeit nicht zu lösen. Safari beruht auf Webkit und das unterstützt im Gegensatz zu anderen Web-Browsern den Befehl 'scroll-behavior' oder ähnliches nicht. :-(

Also muss ich mit dem hässlichen Effekt erstmal leben.
 

Myhar

Hat es drauf

Sehr wahrscheinlich kann man das beheben indem man das HTML (+CSS) ordentlich aufbaut, aber nachdem keinerlei Code bis jetzt gezeigt wurde fällt es mir schwer hier auch nur einen Ansatz zur Problemlösung beizutragen :/
 

draupnir

Moderator

Teammitglied
Das Gerippe des Quellcode (reduziert auf das Entscheidende) sieht so aus:

<html>
<head>
<title>Stehender Kopf </title>
<style>
* {margin: 0px; padding: 0px;} /* Alle Ränder & Abstände auf Null */
body {background: #006699;}
#block_innen, #kopf, #inhalt { max-width: 960px;}
#kopf-mitte, #inhalt-mitte {max-width: 916px;} /* maxBreite 960 - (2x 22 px) = 916 px */

/* --- Layout-Parameter --- */
#block_max{ text-align: center; position: absolute; width: 100%; height: 100%; }
#block_innen{ height: 100%; margin: 0px auto; }

#kopf {width: 100%; height: 50px; position: fixed; top:0px; /* fixieren am oberen Rand */ background-color: #006699;}
#kopf-links, #kopf-rechts{width: 2%; min-width: 22px; height: 50px; float:left; background-color: #006699;}
#kopf-mitte {background: #FFF; height: 45px; float: left; width:96%; }

#inhalt {width: 100%; height: 100%;}
#inhalt-links, #inhalt-rechts, #inhalt-mitte {height: 100%; margin-top: 50px;} /* Abstand nach oben gleich der Höhe von Kopf */
#inhalt-links, #inhalt-rechts{width: 2%; min-width: 22px; float:left; background-color: #006699; }
#inhalt-mitte {background: #FFF; float: left; width:96%; overflow: hidden; }

</style>
</head>

<body>
<div id="block_max">
<div id="block_innen">
<div id="kopf">
<div id="kopf-links"></div>
<div id="kopf-mitte">
<p>KOPF</p>
</div>
<div id="kopf-rechts"></div>
</div>
<div id="inhalt">
<div id="inhalt-links"></div>
<div id="inhalt-mitte">
<p>INHALT 1</p> <p>INHALT 2</p> <p>INHALT 3</p> <p>INHALT 4</p> <p>INHALT 5</p> <p>INHALT 6</p>
<p>INHALT 7</p> <p>INHALT 8</p> <p>INHALT 9</p> <p>INHALT 10</p> <p>INHALT 11</p> <p>INHALT 12</p>
</div>
<div id="inhalt-rechts"></div>
</div>
</div> <!-- end of block_innen -->
</div> <!-- end of block_max -->
</body>
</html>

Einfach herauskopieren, als .html speichern und mit Safari öffnen. Beim (über)scrollen nach oben reissen #kopf (welcher fixiert ist) und #inhalt hässlich auseinander.
 

draupnir

Moderator

Teammitglied
Hurrah und Heureka! Ich habe die Lösung gefunden.

Wenn #kopf 50px hoch ist, dann muss man #inhalt fixieren mit
#inhalt {width: 100%; height: calc(100% - 150px); position: fixed; }
und damit das scrollen noch geht, muss
#inhalt-mitte {overflow-x: hidden; overflow-y: auto;}
sein.

Fall gelöst. Mal sehen, welche Webbrowser damit vor Schreck tot umfallen.

Schönes Wochenende.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben