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

Bildergalerie funktioniert nicht im Safari

S

sailor04

Neues Mitglied
Hallo liebe Community,

ich habe bisher versucht sämtliche Probleme selbst zu lösen aber nun bin ich mit meinem Latein am Ende..

Ich habe eine Galerie mit column erstellt. Jedes Bild hat zudem einen kleinen Effekt beim Mouseover (scale und opacity). Die Galerie wird in allen aktuellen Browsern korrekt angezeigt (sogar im IE). Auch die Animationen funktionieren wie sie sollen. Nur im Safari funktioniert das ganze noch nicht. Dort funktioniert der Effekt lediglich in der ersten Spalten. Alle anderen Spalten reagieren nicht; lassen sich nicht einmal anklicken.

Ich habe herausgefunden das es mit der Animation zusammenhängt. Sobald ich diese auskommentiere lassen sich alle Bilder anklicken. Die Animation möchte ich aber unbedingt beibehalten.

HTML: 
<div id="gallery">
        <section id="photos">      
                        <a href="ref1.html"><img  class="shrink" src="img/ref1.jpg" alt="ref1"/></a>   
                        <a href="ref2.html"><img  class="shrink" src="img/ref2.jpg" alt="ref2"/></a>   
                        <a href="ref3.html"><img  class="shrink" src="img/ref3.jpg" alt="ref3"/></a>   
                        <a href="ref4.html"><img  class="shrink" src="img/ref4.jpg" alt="ref4"/></a>               
                        <a href="ref5.html"><img  class="shrink" src="img/ref5.jpg" alt="ref5"/></a>               
                        <a href="ref6.html"><img  class="shrink" src="img/ref6.jpg" alt="ref6"/></a>   
                        <a href="ref7.html"><img  class="shrink" src="img/ref7.jpg" alt="ref7"/></a>
                    </div>       
        </section>
</div>



[CSS]
.shrink {
  opacity: 0.8;
  display: inline-block;
  -webkit-transition-property: opacity, transform;
  transition-property: opacity, transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.shrink:hover, .shrink:focus, .shrink:active {
  opacity: 1.0;
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
}

* { margin: 0; padding: 0; }

#gallery {
  position: relative;
  width: 70%;
  margin: 0 auto;
  top: 158px;
}

#photos {
   line-height: 30px;
   -webkit-column-count: 4;
   -webkit-column-gap:   10px;
   -moz-column-count:    4;
   -moz-column-gap:      10px;
   column-count:         4;
   column-gap:           10px;

}
#photos img {
  height: auto !important;
  width: 100% !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1100px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}




Ich hoffe ihr könnt mir bei meinem Problem weiterhelfen :-/

lg
 
Was genau funzt nicht? column + transition + transform + position: relative?

Dann würde ich es vereinfachen. Das position: relative kann durch margin-top ersetzt werden, und statt :hover könnte man ein jQuery mouseenter() schreiben, welches die Klasse .shrink entfernt und eine andere mit dem Attribut transform hinzufügt.
 
Und was soll das bringen? Es funktioniert tadellos. Nur im Safari stimmt irgendetwas nicht. Noch mal:

Ich habe ein grid mit columns erstellt. Sämtliche Bilder werden schön von oben nach unten dargestellt. Jedes Bild erhält die Klasse .shrink die dafür sorgt dass das Bild bei einem Mouseover an Deckkraft zunimmt und das Bild ein wenig verkleinert wird. In allen Browser funktioniert das einwandfrei. AUßER im Safari.

Problematik dort:
Die Mouseover Animation funktioniert nur in der ersten Spalte. Alle anderen Spalten zeigen keine Reaktion auf einen Mouseover. Nicht einmal auf einen Klick. Als wären sie gar nicht da.

Wie gesagt. In allen anderen Browser funktioniert es einwandfrei. Ich wüsste nicht was dein Vorschlag bezwecken soll. Wenn ich position:relative; entferne wird das Problem nicht behoben. Trotzdem vielen Dank. Vielleicht habe ich dich da jetzt auch falsch verstanden. Aber das scheint in meinen Augen nicht zu helfen :-/ Zumal die Animation im Safari in der ersten Spalte ja einwandfrei funktioniert...
 
Bringen soll es, dass Problem einzugrenzen. Eine mögliche Problembeschreibung könnte dann lauten: Das Hovern über Elemente, die mit column positioniert werden, funktioniert im Safari nur innerhalb der ersten Spalte.

Falls es sich so verhält, was ich hier jetzt nicht verifizieren kann/will, und Stackoverflow auch keine Antwort weiß, sucht man nach einem Workaround. Wozu eigentlich column, wenn es lediglich um Bilder geht? Alternativen dazu wären die Verwendung eines Grid Layouts (Bootstrap, etc.) oder eventuell auch Flexbox.
 
Column setzt die Bilder unmittelbar untereinander und nebeneinander. Abhängig von der Anzahl der definierten Spalten.
Columns und Animationen scheinen in dieser Kombination im Safari jedenfalls nicht zu funktionieren (auch mit Keyframes funktioniert es nicht).

Ich habe mir dann Flexbox angeschaut. Und auf dem ersten Blick scheint es ideal zu sein. Allerdings besitzt jedes Bild lediglich eine festgesetzte Breite von 320px. Die Höhe aber variiert je nach Bild. Und da liegt das Problem. Mit Flexbox werden alle Bilder zwar von oben links nach unten rechts angeordnet aber durch die unterschiedlichen Höhen nicht unmittelbar an dem darüber liegenden Bild.

Zudem soll sich das grid an die Fenstergröße des Browsers anpassen. Beim verkleinern des Fensters sollen die Bilder, bzw. das Grid bis zu einem bestimmten Punkt (220px Breite) verkleinert werden ehe dann die Spalten von 4 auf 3 reduziert werden und die Bilder wieder ihre Breite von 320 px einnehmen (u.s.w.).

Auf jeden Fall schon einmal Danke für den Tipp. Die Animationen funktionieren mit Flexbox auch unter Safari. Jetzt stellt sich nur die Frage ob die Flexbox wirklich so flexibel ist wie der Name es vermuten lässt :-/

Hier mal der geänderte CSS Abschnitt. Wie bekomme ich die jetzt oben genannte Probleme mit der Flexbox hin? Ich habe schon Google bemüht konnte aber für mein Problem noch keine Lösung finden. Es wäre echt lieb wenn du/ihr mir da helfen kannst/könnt. Ich b in echt am verzweifeln..

Code: 
.shrink {
  opacity: 0.8;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.shrink:hover, .shrink:focus, .shrink:active {
  opacity: 1.0;
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
}

#gallery {
  position: relative;
  width: 70%;
  margin: 0 auto;
  top: 158px;
}

#photos {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
}

#photos img {
  max-width: 320px;
  width: 100%;
  margin: 5px;
}



EDIT: So soll es aussehen: http://tympanus.net/Development/GammaGallery/
Allerdings soll man bei mir bei einem Klick auf ein Bild auf eine andere Seite weitergeleitet werden. Das Bild brauch sich nicht extra zu öffnen. Bei meinem Mouseover soll auch kein Text erscheinen. Das muss doch auch ohne javascript möglich sein oder?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben