CSS Bug mit backgroud-size:cover

[jakestyler]

Hallo, folgendes findet man im CSS meiner Seite:

.sectioncontact {
    background-image:url(img/road_to_nowhere_by_mermaya-d4bla7j.jpg);
    background-attachment:fixed;
    background-position:top;
    padding:80px 80px;
    margin:0 auto;
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    text-shadow:none;
}

Angezeigt wird mir das ganze so:

Eigentlich sollte der Hintergrund aber über den ganzen Teil den ihr hier seht gehen.
Außerdem scrollt der Background auch nicht mit, was er eigentlich sollte.

Funktioniert es bei euch auch nicht, oder habe ich einen Fehler gemacht? Bis vor kurzem ging das alles noch.

Seite: ***

Danke schonmal! :)

 

[jakestyler]

Sorry, der Code ist:

.sectioncontact {
background-image:url(img/road_to_nowhere_by_mermaya-d4bla7j.jpg);
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
text-shadow:none;
padding:80px 80px;
margin:0 auto;
}

 

[soulxheart]

Hallo jakestyler

Hast du es inzwischen hinbekommen? Bei mir wird es jedenfalls richtig angezeigt (Mozilla Firefox v17.0.3).



Grüsse

 

[threadi]

Bei mir passt es auch?! Welchen Browser verwendest Du?

 

[jakestyler]

Nein, habe ich nicht. Vielleicht liegt es auch an mir.

 

[threadi]

Klar, ein schiefer Blick oder so - der Browser den Du nicht nennst wird sicher nicht Schuld sein ;)

 

[jakestyler]

Benutze den Safari & Chrome auf Mac OS X - Andere Seiten funktionieren aber einwandfrei.

 

[threadi]

In meinem Chrome unter Windows sieht alles ok aus.

 

[Tronjer]

Eine direkte Lösung kann ich auch nicht anbieten, aber zumindest ein paar Beobachtungen und Überlegungen.

Die eine wäre, dass scrollPos einen Fehler wirft. Daran könnte es liegen, und deshalb würde ich das erstes ausbügeln. Dafür spricht auch, dass wenn ich zu Contact scrolle und einen Refresh ausführe, das Background-Image ordentlich aussieht. Für das weiche Scrollen zwischen den Ankern einer Seite reichen ein paar einfache Zeilen jQuery (hint: animate).

Die zweite ist, dass Safari und Chrome (der neue Opera afaik auch) die Webkit Engine verwenden und FF auf Mozilla basiert. Aus dem Grunde kann es in Ausnahmefällen zu Darstellungsproblemen kommen. Wer beim Googeln schon mal über "-webkit-transform-style: preserve-3d" gestolpert ist, weiß was ich meine.

Dazu kommt noch ein weiteres Phänomen. Ich schaue mir die Seite hier auf dem Mac (15" Retina MBP mit angeschlossenem 27" TB Display) an. Während das Scrollen auf dem TB im Safari flüssig ist, ruckelt es, wenn ich das auf das Retina Display mache.

 

[jakestyler]

Komisch...
Bis gestern funktionierte noch alles.

 

[Tronjer]

Dann überlege, was sich seit gestern verändert hat.

Ich würde das scrollPos mal ganz rausnehmen und durch einfache Hyperlinks ersetzen. Vielleicht löst sich das Problem ja dadurch, und du kannst die Links anschließend immer noch animieren.

 

[jakestyler]

Okay, werde das mal machen. Danke aufjedenfall! :)