Probleme mit der Darstellung unter Safari (Mac)

[Eisbergsalat666]

Hi,
ich habe ein Darstellungsproblem welches nur auf einem Mac und Safari auftritt. Es werden Bilder verkleinert / versetzt; und ein relativ-positioniertes Bild gar nicht angezeigt.
Auf www.eisbergsalat666.bplaced.net sieht man auf jedem Browser ein Bild links unten welches an der Bildschirmkante ansetzt, beim Mac wird das Bild klein und versetzt angezeigt.
1.

#wolf1 {
    position: fixed;
    top: 55%;
    left: 0%;
    z-index: 1;
}
#wolf1 .profile-pic1 {
   position: relative;
   width: 70%;
   border-radius: 0%;
   z-index: 1;

</header> <!-- Header End -->

<div id="wolf1"><img  src="images/portrait1.png" alt="" class="profile-pic1" title="Wolf" /></div>

<!-- About Section -->
   <section id="about">

2. etwas weiter unten, im about-Abschnitt das selbe. Das Bild rechts sollte auch hier auf der Kante zum nächsten Bereich liegen...wir mir in Chrome, Opera, Firefox und IE auch korrekt angezeigt.

#wolf2 {
    position:absolute;
    top: 45%;
    right: -30%;
}
#wolf2 .profile-pic2 {
   position: relative;
   width: 65%;
   border-radius: 0%;
}

            Es ist : Keine wie Du
            </p>
           
<div id="wolf2"><img  src="images/portrait3.png" alt="" class="profile-pic2" title="Wolf" /></div>
            <div class="row">

               <div class="columns contact-details">

3. Das Hintergrundbild unter Auftritte wird auf dem Mac-Safari scheinbar erst gar nicht geladen...im Gegensatz zu allen anderen Browsern.

#shows {
   background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center;
   background-size: cover !important;
    -webkit-background-size: cover !important;
   background-attachment: fixed;
   z-index: 5;
  
   position: relative;
   min-height: 200px;
   width: 100%;
   overflow: hidden;
}

 <section id="shows">

      <div class="text-container">

         <div class="row">

            <div class="two columns header-col">

               <h1><span>Auftritte</span></h1>

            </div>

            <div class="ten columns flex-container">

               <div class="flexslider">

                  <ul class="slides">

                     <li>
                        <blockquote>

Warum ist das so??? Danke für die Hilfe!!!

 

[SpiceLab]

Punkt 1 lässt sich durch bottom:0 anstelle von top:55% korrigieren.

Zu den übrigen Problemen kann leider ich nichts raten, weil sie im Safari/Win nicht existieren.

 

[SpiceLab]

Für Punkt 2 gilt das gleiche, wie für Punkt 1.

Kleiner Zusatz: padding-bottom:66px für #about sorgt hier weiterhin für einen Abstand. Dieser wäre dementsprechend zu entfernen.

 

[Eisbergsalat666]

Danke!
aber warum sich safari hier so verhält weißt du auch nicht oder? und für pkt 3 fällt dir auch nichts ein oder?

 

[SpiceLab]

Als Windows-User kann ich zu den Gründen nichts sagen.

Punkt 3 ist für mich nicht nachvollziehbar.

 

[Eisbergsalat666]

danke....mir ist das auch erst heute aufgefallen. durch zufall hab ich die seite mal über nen mac aufgerufen und war ziemlich verwundert. habe gesucht und auch probiert

vllt sieht ja jemand anderes noch in diesen eintrag und sagt "klar, kenn ich...lösung xy "

 

[SpiceLab]

Da das Hintergrundbild im Safari/Win dargestellt wird, und ich im CSS auch keine Auffälligkeiten entdecken kann, wie in den beiden Punkten zuvor, musst du dich wohl gedulden, bis hier ein "Mac-Profi" aufschlägt.

[edit]Tipp-Ex[/edit]​

 

[Jan-Frederik Stieler]

Hi,
welches Hintergrundbild meinst du genau? Das mit dem Bokeheffekt?
Das wird bei mir im Safari 7.1.2 (9537.85.11.5) angezeigt.

Grüße

 

[Eisbergsalat666]

moin. genau dieses Bild mit diesem effekt mein ich. mir fällt aber gerade auf, dass mein safari seit einem jahr nicht geupdated wurde...mach ich nachher mal. danke schonmal für den hinweis

 

[Eisbergsalat666]

jo....hatte safari version 5.1.7 drauf. gar nicht drauf geachtet. Danke und einen guten start in die Woche !
Alle Probleme beseitigt