• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

position: fixed funktioniert in Chrome nicht

S

Senseless

Mitglied
Hey zusammen,
seit kurzem funktioniert auf meiner Seite mini-labradoodle.de die Funktion des fixierten Bildes nicht mehr. Allerdings nur im Chrome. Bei anderen getesteten Browsern funktioniert es nach wie vor.
Ich bin auch der Meinung, dass ich nichts verändert habe. Das merkwürdige ist auch, dass das Bild entgegen der Scrollrichtung wandert.
Habt ihr eine Idee für mich, was hier schiefgelaufen ist?

Danke vorab!

Gruß,
Tobi
 
Zuletzt bearbeitet:
Werbung:
Dein Link ist vorübergehend nicht erreichbar .
Aber der Link geht http://mini-labradoodle.de/
Ich habe àuf keinen Browser Probleme alles bestens.
Chrome habe ich nicht ,ich kann nur die Chrome Maschiene laden oder wie das heißt ,aber da ist auch alles bestens.
 
Ich hätte auch den richtigen Link einsetzen sollen :D
Jetzt passt er.
Danke fürs testen. Bei mir ist es wie gehabt. Wenn jemand anderes nochmal testen könnte und dort auch alles passt, muss ich mein Chrome wohl mal resetten.
 
Werbung:
Bei mir funktioniert es.
Aber Cache löschen hilft oft. Probiers mal aus und ansonsten kannste ja mal neuinstallieren.
 
Danke fürs testen.
Cache hatte ich zuvor schon gelöscht, hat aber nichts gebracht.
Habe Chrome einmal zurückgesetzt und Daten wieder eingespielt und jetzt funktioniert es auch wieder.
 
Werbung:
Zu früh gefreut. Es war nur vorübergehend. Jetzt besteht das Problem erneut, dass das Hintergrundbild entgegen der Scrollrichtung wandert und nicht fixiert bleibt.
Auch das Zurücksetzen und Neuinstallieren von Chrome hilft nicht. In anderen getesteten Browsern wie IE, Edge, Firefox ist alles bestens.
Bei euch wird es noch immer korrekt angezeigt?
Wenn ja, an was kann es liegen, dass es bei mir nicht funktioniert?

Hier zum besseren Verständnis ein kleines Video:
 
Zuletzt bearbeitet:
Ein ungewollter Parallax-Effekt... gibt es da irgendwas an JS, dass so einen Effekt auslösen kann?
Als Übergangslösung empfehle ich, bei "skel-panels-pageWrapper" mal position: absolute zu unterbinden.

Edit:
Ich bin mir ziemlich sicher, dass es JS ist, da position absolute (sowie viele andere style-Attribute) im style-Tag von HTML stehen. Falls du sie da nicht selber reingeschrieben hast, wird es das wohl sein. Außerdem kannst du mal testen, ob der gleiche Effekt auftritt, wenn du JS in deinem Browser verbietest.
 
Ist das immer noch der Link von post1# ? Ich habe nach wie vor keine probleme ,sieht alles gut aus und auch kein Parallax-Effekt.
Habe Opera
 
Werbung:
Aaron3219 schrieb:
Als Übergangslösung empfehle ich, bei "skel-panels-pageWrapper" mal position: absolute zu unterbinden.
Zum Vergrößern anklicken....
Ich habe über die Entwicklertools mal dieses Element deaktiviert. Das hat auch geklappt und das Bild bleibt fixiert.

Aaron3219 schrieb:
Außerdem kannst du mal testen, ob der gleiche Effekt auftritt, wenn du JS in deinem Browser verbietest.
Zum Vergrößern anklicken....
Auch mit deaktiviertem JS bleibt das Bild fixiert.

Jetzt kommt jedoch wieder eine dumme Frage: Wie ändere ich jetzt dahingehend meine Webseite, sodass der Fehler gar nicht erst auftreten kann? Habe versucht das passende zu finden, aber war nicht erfolgreich. In der HTML ist keine solche Zeile zu finden und auch wenn ich in der CSS position: absolute entferne, ändert das nichts.
 
Das stimmt. Jedoch ist position: absolute hier nicht zu finden und das Entfernen von position: relative löst das Problem nicht.
Hier sieht es wie folgt aus:
HTML: 
...
<body id="index" class="homepage">
    <div style="position: relative; background-image: url(/images/bg_random/<?php echo 'background' . rand(1,18) . '.jpg'; ?>); background-size: cover; background-position: center center; background-attachment: fixed; color: #fff; text-align: center; padding: 2.5em 0 2em 0; cursor: default;">
        <div id="header">
            <div class="inner">
                <header>
                    <center>
                        <div style="text-shadow: 2px -1px 1px black"><h1>Mini-Labradoodle-Zucht<br>&quot;Vom Mei&szlig;etal&quot;</h1></div>
                        <hr><div style="text-shadow: 0px -1px 1px black"><h4><span class="byline">Zucht aus Leidenschaft</span></h4></div></br>
                        <a href="#banner" class="button circled scrolly" style="font-weight: bold;"><i class="fa">&#xf04b;</i>&nbsp;START</a>
                    </center>   
                </header>
            </div>
            <?php include ("navigation.html"); ?>
        </div>
    </div>
    ...
 
Werbung:
Jetzt weiss ich was mich verwirrt hat.Wenn du die seite betretten tust steht da relative. Sobald du scrollst springt das auf absolute um. Also wird ein Js das ummogeln.Ich kucke mal gerade ob ich das finde
 
Werbung:
Besteht das Problem immer noch? Ich dachte das wäre schon erledigt. Ja dann wollen wir doch noch mal kucken was da los wahr
 
Nachdem ich den Fehler auch sehen konnte weil ich Chrom installiert habe( Irgendwie ist der schneller als mein Opera ),konnte ich den Fehler eingrenzen auf dieses Script.
https://www.mini-labradoodle.de/js/skel-layers.min.js
Was das genau macht weiss ich nicht so genau ,aber es wird da was mit position gemacht und co.
Wenn du es nicht brauchst deaktiviere es oder schmeiß raus. Ansonsten muß mal einer kucken der da schneller durchblickt weil das Script etwas länger ist.
Meld dich ersmal ob du es brauchst und ob es bei dir dann auch weg ist wenn du das Script Deaktivierst/Löscht. Fals ja kucke ich mal späte genauer ob ich den Fehler da in Script finde,fals nicht einer schneller ist als ich ( Hoffe aber doch )
 
Ach super. Nachdem ich es jetzt einmal auskommentiert habe, bleibt das Bild auch wieder stehen. Und andere Einschränkungen dadurch konnte ich auch auf die Schnelle noch nicht feststellen.
Hier steht etwas zur Funktion: https://github.com/ajlkn/skel
Layout (skel-layout.min.js)
(Module) Adds CSS and page layout tools, including a CSS grid system, browser resets and more.
Zum Vergrößern anklicken....

Ich hoffe, dass ich dieses Script nicht brauche. Komisch auch, dass es erst seit Kurzem nicht mehr funktioniert, ohne dass ich hier etwas geändert habe.
Ich danke dir auf jeden Fall!

EDIT: Okay, gibt doch eine Einschränkung. Bei der mobilen Version fehlt die Möglichkeit die Nav-Bar aufzurufen.
Screenshot_20180620-192828.jpg
 
Zuletzt bearbeitet:
Werbung:
Senseless schrieb:
EDIT: Okay, gibt doch eine Einschränkung. Bei der mobilen Version fehlt die Möglichkeit die Nav-Bar aufzurufen.
Zum Vergrößern anklicken....
Das liese sich vieleicht auch noch anders aufrufen.Vieleicht hat wer anders da noch auf der schnelle eine idee wie man das Script ändern kann das alles geht ,ansonsten versuche ich später mal mein Glück.
Aber auch komisch das es nur bei Chrom so ist ,man müßte jetzt nur genau wissen warum chrom mit den Script nicht klar kommt.
 
Hat jemand eine passende Idee, wie man das abändern könnte oder hast du lieber Basti noch ein wenig Zeit und Lust? :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben