background-size: cover - iOS7 Safari

[Chronos]

Hallo Forum,

ich suche nach einer Möglichkeit background-size: cover einfach zu ersetzen.
Leider kann der Safari unter iOS7 diese Eigenschaft nicht.

Eine wirklich gute Lösung findet man im Internet auch nicht, die einzig relevanten Links sind diese:
http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7
http://stackoverflow.com/questions/19045364/fixed-body-background-scrolls-with-the-page-on-ios7
http://blog.mathewcropper.co.uk/2013/12/css-background-size-cover-and-safari-for-ios-7/http://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

Was man auch oft dazu findet ist vegas.js, was ich aber auch schon wieder too much finde, das sind ~ 300 Zeilen JavaScript nur um diese Funktion herzustellen.

Wie man dem vegas.js auch entnehmen kann scheint es wohl auch nur auf <img> anwendbar zu sein:

var $background = $("<img />")

Was jetzt in meinem Fall auch bescheiden ist, ich brauche das Bild als Hintergrundbild des <article>
Bei mir sieht es nämlich so aus:

.article {
  padding-bottom: 120px;
  background-repeat: no-repeat;
  background-color: fade(@brand-primary, 20%);
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;

  overflow: hidden;

Klappt wunderbar in jedem Browser nur iOS7 Safari nicht - wenn man wenigstens etwas dazu lesen könnte wann er das kann :/

Naja ich bin bissl ratlos wie ich das am besten angehen sollte - ein <img> zu nutzen kanns irgendwie auch nicht sein, das ist mir zu viel gebastel als das es praktisch wäre.

Vielleicht habt ihr ja eine Idee.

 

[Tronjer]

Warum kein eigenes background-image für den Safari in iOS?

 

[Chronos]

Warum kein eigenes background-image für den Safari in iOS?

Ja wäre eine Lösung. Das hätte ich dazu schreiben sollen. Das Ding ist, ich mach die Bilder ja nicht. Es gibt ja schon jeweils ein Bild für landscape und portrait.
Da es aber mehrere Seiten sind (20-30 oder so in etwa) müsste man für die alle zwei neue Bilder machen. Das würde ich mir eben sparen können.
Zu mal der Aufwand das zu pflegen dann auch wieder steigt :/

Wäre wohl die einfachste aber auch die Lösung mit dem meisten Pflegeaufwand.
Am liebsten wäre mir zu wissen wann in etwa iOS7 Safari das können wird und einfach zu warten.

Werde zwar jetzt mal einen Dummy für vegas.js bauen aber so wirklich das wahre isses halt nicht.

 

[Chronos]

Hatte gestern mal etwas mit vegas getestet und so richtig überzeugt bin ich nicht. vegas passt zwar in gewissem Maße das Bild an, schneidet aber scheinbar trotzdem gern noch etwas vom Bild weg, vor allem hochkant.

Auf meiner Testseite sieht man das links ein Balken nur zur Hälfte da ist, auf dem würde stehen "0 - 40" (px).
http://imgur.com/qmgpOIR

Jedenfalls funktioniert Vegas so, das es über JavaScript ein eigenes <img>-Tag einbindet und dieses hinter alle anderen DIVs stellt (vereinfacht ausgedrückt).
Für mich ist es nicht so wirklich was aber dann warte ich eben bis Safari die Eigenschaft dann kann.