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

Webseite "zuckt" in Safarie?! O.o

I

IceGloo

Neues Mitglied
Hallo liebes Forum,

aktuell bin ich an einer Webseite dran, und habe bei meinen gestrigen "zwischen-tests" gemerkt das sich die Seite ganz komisch im Safarie verhält, an sich ist dort alles richtig, aber sie "zuckt" immer nach ein paar sekunden.
Erst dachte ich es würden an zu hohen z-indexen liegen, aber das war es nicht, ich kann mir das nur durch js erklären..

gerade bin ich an CSS3pie, html5shiv, modernizr und conditionitz zugange (alle werde ich nicht benutzen aber ich möchte die alle gerade mal richtig einbetten und sehen was für dieses projekt sich am besten eignet)
es kann eigentlich nur an denen liegen, selbstgeschriebenes js ist sehr kurz und bezieht sich nur auf buttons..

ich bitte um Hilfe :-/

hier der Link:
Juwelier Laerbusch


Liebe Grüße!
 
Hallo!

1. Safari, nicht Safarie :)

Ich kenne die Klassen CSS3pie, html5shiv, ... nicht da ich sie nie gebraucht habe, und auch nicht weiß für was man diese brauchen könnte, schließlich funktionieren alle meine Seiten in jedem Browser gleich gut (Jetzt mal von den uralt-Dingern abgesehen). Aber ich denke mal sie sollen HTML5/CSS3 Abwärtskompatibel machen.

Allerdings gehe ich davon aus dass diese ganzen Riesen-Scripts den Browser ganz einfach überlasten, da man wahrscheinlich im Normalfall nur eines von denen benutzt.

Abgesehen dass mir die Seite gut gefallen WÜRDE, funktioniert sie in keinem der von mir getesteten Browser richtig (Chrome, FF, Safari).

Ich finde aber auch dass die Animationen für eine HTML-Seite viel zu "brutal" sind. HTML ist eben leider nicht so leistungsstark wie Flash, was Animationen angeht.

Bevor du mit dem animieren beginnst, solltest du besser schauen dass das HTML-Gerüst auch in allen Browsern korrekt angezeigt wird. Bestenfalls ohne das du auf "Helfer" wie die von dir genannten Scripts zurückgreifen musst. Ich persönlich sehe nämlich keinen Grund der die Verwendung bei dieser Seite rechtfertigt.

Webkit-Browser (Safari, Chrome) sind meiner Erfahrung nach die leistungsfähigsten Browser. Wenn hier etwas nicht gut funktioniert, läuft es meistens nirgends gut.
 
Das verstehe ich nicht, in allesn Browsern (ausser safari und ie) funktioniert die seite bisher super und ohne probleme.

das bild dadrunter wird kurz eingeblendet, es liegt ja auch dadrunter,
der "news bereich liegt fast ganz verdeckt unter dem content bereich, per html ist es auch sauber aufgebaut, sodass dieser sich per css transition nach oben und wieder nach unten verschiebt, sobald man die richtigen links klickt..

das ein objekt mit einem niedrigen z-index vor einem objekt mit einem höheren z-index manchmal erscheint sollte ja eigentlich nicht richtig sein..
 
Weiss zwar nicht, ob es bei dir nun am z-index liegt, aber die Webkit-Engine ist noch nicht voll CSS3-kompatibel. Ich hatte mal eine Projekt, wo backface-visibility nur in Verbindung mit transform-style: preserve-3d funktionierte.

Am Besten: Problem isolieren und im Zweifelsfall googeln.
 
gegoogelt habe ich ja schon wie wild, die nicht kompatibelen dinge von CSS3 kommen bei diesen elementen vor.
ich kann mir das nicht erklären.. hat noch nie jemand etwas ähnliches erlebt und kann mir einen tipp geben?
 
Es befinden sich ja slider auf der ebene die verdeckt ist, liegt es an denen eventuell?

ich denke das ist es, sobald die slider bilder laden oder wechseln dann erscheint kurz die jeweilige ebene..
nun bin ich nicht so der pro in js aber kann man dies irgendwie unterbinden?
 
Zuletzt bearbeitet:
Der Weg zur Lösung führt über die Vereinfachung. Isoliere den "problematischen" Code in einer neuen Datei und mache ihn dort crossebrowser-kompatibel. Gelingt das nicht, würde ich vielleicht nach einem anderen Slider schauen.

Außerdem bliebe natürlich die Frage, ob du nun wirklich so viele Frameworks im Head benötigst.
 
an den slidern liegt es nicht.. ich habe sie mal rausgenommen aber es passiert immer noch,
das es an den 3 bilder-buttons liegen könnte dachte ich mir auch, aber das würde es nur jeweils beim hover aber die regelmäßigen abstände machen mich wirr...
 
folgender aufbau:

<div id="body">
<div id="content_wrapper">
<div id="news_wrapper">
</div>
<div id="content">
</div>
</div>
</div>




body{
margin:0px;
padding:0px;
height:3000px;
overflow-x: hidden;
behavior: url(../js/PIE.htc);
}

#content_wrapper{
position: relative;
top:32.27em;
margin:0 auto;
width:100%;
height:3000px;
z-index: 10;
}



#news_wrapper{
position: relative;
top:0px;
width:100%;
behavior: url(../js/PIE.htc);
height:35em;
box-shadow:0px 0px 4px 1px black;
border-top: 1px solid #414141;
border-bottom: 1px solid #414141;
z-index: 13 !important;
}

#content{
position: absolute;
top:6.8em;
width:100% !important;
height:5000px;
box-shadow:0px 0px 4px 1px black;
border-top: 1px solid #414141;
border-bottom: 1px solid #414141;
behavior: url(../js/PIE.htc);
z-index: 15 !important;
}



was kann dazu führen das alle paar sekunden der jeweils niedrigere div für einen bruchteil einer sekunde sichtbar wird?
 
Du erwartest jetzt aber nicht, dass wir uns in die API Dokus einlesen und für dich googeln, welche der vielen in dieser Seite verwendeten Frameworks und Plugins eventuell nicht miteinander harmonieren, oder? Offensichtlich liegt da ja irgendein Konflikt vor.

Wie ich bereits vorher erwähnte: grenze das Problem ein, isoliere Code, kommentiere Frameworks aus, schalte Plugins ab, disable CSS-Anweisungen, und zwar solange, bis du den Fehler gefunden hast. Oder stelle das Projekt alternativ in die Jobbörse. Ich hänge gerade zwischen zwei Projekten und nehme noch Aufträge an. Für den üblichen Stundensatz.
 
Also, im FF 17 gibt es auch Probleme mit der Darstellung. Ich vermute mal, (weil bei mir deine Seite nie zu 100% geladen wird) dass es am @font-face von google liegt. Kommentiere mal ALLE font-face Angaben aus. Somit sollte das Problem behoben sein. @edit Nee, ist es wohl doch nicht. Sorry.
 
Zuletzt bearbeitet:
Ich habe das Problem isoliert:

<a href="#anker_top" class="scroll" id="news_1">
<div class="view-tenth" id="first_news">
<img src="images/main/news_1.jpg" alt="Goldschmiede Atelier">
<div class="mask">
<h2>Goldschmiede Atelier</h2>
<p>Professionelle Anfertigungen</p>
</div>
</div>
</a>


.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 13;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
z-index: 13;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
z-index: 13;
}





ich dachte erst es würde an dem transform liegen, habe nacheinander alle styles ausgeschaltet, aber nur wenn ich alle hover styles abschalte, passiert der fehler nicht mehr.
es liegt also an dem hover allgemein, dass der div mit den gehoverten elementen kurz im safari durchscheint..

einer ne idee, ich finde per google nichts ähnliches, zwar viele hover probleme aber nichts was mir weiterhilft...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben