CSS wird auf Iphones falsch interpretiert

  • Ich habe hier eine Seite, welche auf einem Iphone leider fehlerhaft dargestellt wird.


    Es ist eine Seite im One-Page Design, in der es ein paar Bilder mit Parallax Effekt gibt.


    Nun stimmt allerdings die Skalierung auf einem Iphone nicht. Die Bilder sind extrem groß und somit nicht wirklich sichtbar bzw wirken extrem herangezoomt. Auf Andoid-Geräten funktioniert alles wie es soll.


    hier mal kurz der Code:


    HTML

    Code
    1. <div class="parallax1">
    2.     <div class="par1">
    3.         <p class="h2">Text im Vordergrund</p>
    4.     </div>
    5. </div>


    CSS

    Code
    1. .parallax1 {
    2. background-image: url("../img/par1.jpg");
    3. min-height: 100%;
    4. height:auto !important;
    5. height:100%;
    6. background-attachment: fixed;
    7. background-position: center;
    8. background-repeat: no-repeat;
    9. background-size: cover;
    10. }


    Originalgröße des Bildes ist 1300x864 px.


    Wieso wird es im Iphone völlig überzogen dargestellt, während es auf Android funktioniert? Als Browser wurde in beiden Fällen Chrome genutzt. Hat jemand ne Idee?

  • Ich glaube nicht das man dir mit den Code schnipsel helfen kann.

    Auch wenn ich die Höhenangabe gerade so nicht verstehe wird das wohl nicht viel aus machen wenn man da dran rumspielt.


    Hast du den schon mal rum gespielt was überhaupt passiert wenn du zb das !important weg machst ,oder bei background-size mal contain hinschreibt usw ?


    An besten wäre ja ein Link zur Seite damit man das mal sehen kann und analysieren was da los ist ?

  • Problem grad selbst Gelöst. Es lag am fixierten background-attachment, damit kann das Iphone nicht umgehen. Einfach auf scroll zurückgesetzt für mobile Geräte, schon macht auch das iphone das, was das android bereits selbstständig erledigt hatte. Womit sich mir wieder zeigt, welche Plattform alltagstauglicher ist...