Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>iPhone Safari CSS background url fixed?

iPhone Safari CSS background url fixed?

Termi
Termi15.03.1017:10
Hi,

ich versuche gerade, im mobilen Safari auf dem iPhone mit CSS eine Hintergrundgrafik zu fixieren (background:url(...) fixed;). Leider klappt dies nicht, wie gewohnt. Gibt es eine Möglichkeit, den Effekt dennoch zu erreichen?

Danke für zielführende Tipps!
0

Kommentare

fallen
fallen15.03.1017:18
das geht garnicht, apple erklärt das auch in den dokumenten für entwickler. jetzt auf die schnelle hab ich aber kein link für dich dahin.
0
Termi
Termi15.03.1021:36
Ich habe bereits Hinweise gefunden, dass Apple hier anders vorgeht, als alle Anderen. Mir ist auch klar, dass eine richtig gut gemachte Web Application nicht lange scrollen sollte. Häufig bekommt man aber den beabsichtigten Effekt auch anders hin (Hintergrund DIV per CSS oder JS an der Position halten, oder so...).

Wenn jemand da eine Idee hat, oder eine Seite kennt, auf der das funktioniert, bin ich für Tipps dankbar.
0
fallen
fallen15.03.1022:03
apple geht ansich nicht anders vor, nur macht das zoomen und scrollen im mobile safari eine etwas handhabung nötig.

schau mal hier, den link meinte ich:

da geht es zwar ums ipad, aber das selbe gilt fürs iphone und den ipod touch!
0
fallen
fallen15.03.1022:04
wenn du allerdings eine möglichkeit gefunden hast, sag bescheid
0
Termi
Termi15.03.1022:58
Hmmm... Klingt für mich aber nicht nach der Begründung. Mir ist klar, dass ich beim Hineinzoomen ggf. fixed elements nicht mehr sehe. Allerdings habe ich eine Seite mit einem fixen Viewport (per Meta Tag definiert) und verbiete das Zoomen. Genauer gesagt definiere ich...

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Für mich ist es daher ziemlich unlogisch, hier ein fixes Hintergrundbild nicht fix umzusetzen. Ich dachte halt, man kann dies irgendwie umgehen. Muss mal noch ein Wenig suchen.

Aktuell läuft noch alles auf meiner Entwicklungsumgebung, da ich gerade auch mit WOFF experimentiere und noch den Fallback für den blöden IE6 programmieren und die Funktion unter IE8 testen muss. Im Vorgriff auf die iPhone Optimierung hatte ich die JavaScript Menüs mit Grafiken und MouseOver durch Listenpunkte, CSS & WOFF ersetzt. Mein Ansatz, erstmal nur die Seitenerzeugungsklasse anzupassen und später bei bestimmten Spezialseiten eine iPhone Optimierung umzusetzen funktioniert aber soweit ganz ordentlich.
0
fallen
fallen17.03.1014:46
schau dir mal das neue iwork.com auf dem iphone an, die leiste oben ist fix! wenn du im safari den benutzer-agent auf iphone stellst kannst du dir das auch so anschauen.
0
Termi
Termi18.03.1000:29
Verstehe ich nicht ganz, welche Leiste Du meinst. Allerdings kann ich mich auch nicht mit meiner AppleID einloggen. Vermutlich liegt's daran.

Habe meine Homepage jetzt umgestellt. Unter kann sie jetzt auch in einer optimierten iPhone Version genutzt werden. Diese ist noch weit davon entfernt, perfekt zu sein, aber der erste Schritt ist getan und nach und nach werde ich noch einiges optimieren. Als nächstes sind das Schnellmenü und die Mobiltelefondatenbank dran.
0
Termi
Termi11.07.1000:42
Wollte den Thread nochmal vorholen. Gibt es mittlerweile Erkenntnisse, wie man unter dem mobilen Safari den background per css fixieren kann oder einen Workaround?
0
sierkb11.07.1002:01
Termi
und noch den Fallback für den blöden IE6 programmieren

Für wen machst Du das? Machst Du das, damit bloß kein IE6-Nutzer auf die Idee kommt, seinen Browser upzugraden auf mindestens IE7 oder IE8 und wir noch in 10 Jahren vom IE6 belästigt werden? Damit bloß kein IE6-Nutzer merkt, wie schlecht dieser Browser eigentlich ist und was er eigentlich alles NICHT kann? Kurzer Browsercheck mit kurzem Hinweis zum Browser-Upgrade reicht. Beispielseite dafür, die Du dafür verlinken könntest, ist die Offizielle Browser Coice-Seite von Microsoft: Wählen Sie Ihre(n) Webbrowser .

Oder Du bietets ihm bzgl. IE6 gleich diese Spezialseite von Microsoft (Australien) an:

"You wouldn't drink 9-year-old milk... so why use a 9-year-old browser?" -- Upgrade to Internet Explorer 8

Siehe dazu auch:

Microsoft Oz compares IE6 to spoiled milk • The Register
Microsoft: 'Using IE6 is like drinking 9-year-old milk'
0
Termi
Termi12.07.1022:53
Hallo sierkb,

eine Standpauke zum IE6 brauche ich nun wirklich nicht. Habe gerade den Internetauftritt einer großen Bank relaunched und hierbei der Agentur explizit aufgegeben, NICHT mehr den IE6 zu berücksichtigen.

Leider ist der IE6 immer noch in großen Firmen installiert, so dass deren Mitarbeiter keine Chance haben, etwas besseres zu nutzen. Daher stehe ich auf dem Standpunkt, dass es noch irgendwie im IE6 laufen soll, aber deutlich schlechter aussehen darf.

So, und was ist jetzt mit tollen Tips zum gefixten Hintergrund?
0
sierkb13.07.1000:24
Termi
und hierbei der Agentur explizit aufgegeben, NICHT mehr den IE6 zu berücksichtigen.


Sieh es bitte nicht als Standpauke. Aber als Thema, das mir wirklich am Herzen liegt. Denn nicht ohne Grund gibt's den IE6 noch. Den gibtÄs nicht zuletzt aufgrund solchen zögerlichen Verhaltens der handelnden Aktuere, wie Du es hier beschreibst. Das Henne-Ei-Problem. Solange der IE6 noch irgendwo benutz wird, wird es Leute geben, die auf ihn Eücksicht nehmen wollen. Und gleichzeitig tragen genau diese Leute durch ihre Rücksichtnahmen dazu bei, dass es ihn eben nochweiterhin geben wird, weil der Anreiz für die Benutzer einfach genonnem wird, upzugraden. Wozu upgraden? Läuft doch auch so (dank Pflästerchen, was der Nutzer aber oft nicht weiß oder wahrhaben will). Gleiches mit vielen IT-Abteilungen in den Firmen. Das ist zum Teil pure Bequemlichkeit/Faulheit der Leute und fehlender Durchblick über Ursachen und Wirkungen. Dass man selber durch sein eigenes Zutun zum maßgeblichen Teil des Problems geworden ist, wird viel zu selten eingesehen, weil der Weitblick fehlt, und weil man schlecht beraten wurde oder ist und sich nicht rantraut, alte gemachte Fehler nun endlich mal anzugehen und zu beheben (z.B. eigene, speziell auf den IE6 getrimmte Intranet-Lösungen durch modernere und wenigstens mit IE8 zurechtkommende zu ersetzen oder diese anzupassen). Faulheit und fehlendes Wissen stehen da oft Hand in hand Pate. Henne-Ei-Prolem.

Agentur im Zweifel wechseln, wenn dies nicht können oder immer noch an veralteten Vorstelungen hängen, die sich für die Zukunft als Bumerang erwiesen haben.
Wenn selbst Microsoft höchstselbst seit Jahren davon abrät, den IE6 noch länger zu unterstützen und ihm hinterherläuft und Microsoft da jetzt sogar Kampagnen fährt und einen Mann extra dafür eingestellt hat, der hier dem IE6 den Garaus machen soll, dann sollten auch solche Agenturen, mit denen Du da zu tun hast, langsam ein Einsehen haben, dass sie sich da auf dem Holzweg befinden und im Grunde mit dem Festhalten und Unterstützen des IE6 nur noch alles schlimmer machen bzw. aktiv mithelfen,das Ganze auf einem solchen beklagenswerten Level festzunageln.
Leider ist der IE6 immer noch in großen Firmen installiert, so dass deren Mitarbeiter keine Chance haben, etwas besseres zu nutzen.

Siehe zuvor Gesagtes. Da ist Gespräch gefragt. Und Aufklärung. Und Absprache. Solche Firmen haben auch IT-Abteilungen und IT-Verantwortliche. Die kann man direkt ansprechen und mit ihnen in einen Dialog treten, dass die mal ihren Job richtig machen und in die Kontakte kommen. Ihr seit engagiert worden, um etwas besser zu machen, sonst würde euer Auftraggeber es nämlich selber machen! Dazu gehört auch eine gescheite und überzeugende Beratung oder zumindest ein erntsgemeinter Versuch dazu. Und wenn man sich eurem Rat trotzdem nicht beugen will: Aufpreis. Aufpreis für euren Mehraufwand. Das wirkt auf manche dann evtl. überzeugender.

Und das, was die dann nicht hinkriegen, das solltet ihr als Extra-Aufwand auf euren Preis draufschlagen nach dem Motto: IE6-Unterstützung kostet extra -- und zwar ganz schön extra. Was meinst Du, wie die Gegenseite dann plötzlich ins rechnen und wenigstens ins Überlegen kommt, ob man mit einem Browser-Upgrade ihrerseits da nicht unnterm Strich besser führe. Vor allem, wenn denen das dann mehrfach passiert und nicht nur einmal.
Daher stehe ich auf dem Standpunkt, dass es noch irgendwie im IE6 laufen soll, aber deutlich schlechter aussehen darf.

Nicrgendwo steht festgeschrieben, und kein Gesetz verlangt, dass es im IE6 pixelgenau gleich aussehen soll. Der IE6 soll's anzeigen. Fertig Punkt aus. Und wenn er's eben nicht kann, dann kann er's eben nicht. Fertig. Punkt. Aus.
Lies Dir mal die BITV und §10 und die dazu erfolgten Ergänzungen durch zum Thema assistive Technologien und der Zumutbarkeit, hier ältere Technologien noch unterstützen zu müssen. Berücksichtigt man das, so fällt der IE6 unter die Unzumutbarkeitsgrenze und dürfte schon von dieser Verordnung her eigentlich nicht mehr berücksichtigt werden, weil der Aufwand dafür inzwischen unzumutbar geworden ist...

Es darf ruhig schlecht aussehen im IE6 oder schlechter, der Benutzer darf das ruhig merken. Nur so macht er ein Upgrade wenigstens auf IE7 oder IE8 der gar einen Switch zu einem anderen Browser, der's tadellos dann kann.
Kleiner Browser-Check und Warnhinweis auf der Webseite vorausgeschickt von euch.

Oder knalle dann, um Arbeit zu sparen, Dean Edward's Scripts wenigstens rein, die em IE6/IE7 dann per JavaScript ein paar Dinge nachträglich beibringen. Für euch weniger Aufwand, für den hartnäckigen IE6/IE7-Nutzer sieht's dann ein bisschen schöner aus. Mit minimalem Aufwand.
So, und was ist jetzt mit tollen Tips zum gefixten Hintergrund?

Ganz konkretes Code-Beispiel oder eine Test-Seite sowohl in CSS als auch in Markup, das angeblich nicht klappen will, wäre nett und hilfreich. So aus der Luft und mit so spärlichen Infos ausgestattet, kann man nicht helfen.
0
Termi
Termi13.07.1009:22
Zum IE6: Stimme Dir zu. Die Rechnung bei >1Mio Mitarbeitern weltweit mit seit Jahren "optimierten" Anwendungen sieht anders aus, als bei kleinen Firmen. Da kommt jetzt passend, dass MS den Support einstellt. Da kommt nämlich schnell Group Audit wegen Sicherheitsrisiken.

Zum Thema: Aufruf von skyynet.de mi UserAgent iPhone. Hintergrundbild abrollt. Thema ist allgemein bekannt.
0
fallen
fallen13.07.1009:39
Jaa, ich wieder.

Zum IE: Ich bin auch auf dem Standpunkt IE6 unterstützen JA, aber lediglich so, dass es benutzbar ist. Hässlich darf es sein, das sind die IE6 User ja eh gewohnt. Aber die grundsätzliche Funktionalität sollte schon noch gegeben sein.

Zum iPhone Safari: Nein, nix neues was CSS angeht. Aber schau dir mal die Sproutcore-Demos an, damit geht es. Das ist auch die Technik, mit der Apple die iPhone- und iPad-Optimierten Seiten anlegt. Eben wie zum Beispiel iWork.com oder der Developerbereich auf dem iPad!
Das hier funktioniert auch so: http://touch.sproutcore.com/npr/
0
sierkb13.07.1011:27
fallen
Zum IE: Ich bin auch auf dem Standpunkt IE6 unterstützen JA, aber lediglich so, dass es benutzbar ist.


Wozu willst Du Dir da noch extra Mühe machen? Der IE6 ist technisch gerade mal auf einem Stand eines Netscape4 + 1 Jahr, IE6 ist nur 1 Jahr jünger als dieser!!!

Unterstützt Du heute noch in irgendeiner Form Netscape 4? Du würdest Leuten seit Jahren einen Vogel zeigen, wenn sie mit denselben Argumenten wie Du dem Netscape 4 noch hinterherlaufen würden!

Selbst Microsoft muss und will derzeit alle Kraft aufwenden, um den IE6 endlich auch aus den Köpfen und den Desktops der Leute runterzukriegen. Solcge Denke wie die Deinige, die ist es, die dem IE6 noch länger das Leben erhält!

Gar nix machen! Auflaufen lassen! Der IE6 stellt die Sachen dann eben so dar, wie er es tut. Und das, was dann da als Ergebnis rauskommt, das sollte den Leuten mal die Augen öffnen! Was meinst Du, wie schnell die hastig den IE8 auf ihr System raufbringen bzw. die Download-Seite von Microsoft anlaufen, um upzudaten!


Nix mehr verschleiern, nix mehr beschönigen. Den IE6 so zeigen bzw. sich so zeigen lassen wie er ist. Was er nicht kann, kann er eben nicht. Und wenn's nicht nur hässlich aussieht, sondern dann auch noch unbenutzbar, ja umso besser! Dann wird's erst recht offensichtlich, was er alles NICHT kann!

>Aber die grundsätzliche Funktionalität sollte schon noch gegeben sein.

Sagt und verlangt wer? Wie gesagt: der IE6 ist grad' mal 10 Monate jünger als der Netscape 4... Bedenkt den noch irgendjemand mit genau derselben Rücksichtnahme? Nein. Und warum nicht? Warum bekommt der IE6 hier eine Extrawurst gebraten, die unterm Strich nix anderes macht als den Ist-Zustand eigentlich noch weiter in die Zukunft zu verlängern? Ein Ist-Zustand, an dem eigentlich niemandem gelegen ist und den alle gerne beseitigt hätten aber soviele noch für tun, dass er erhalten bleibt? Wieviel Kredit will man dem IE6 denn noch einräumen? IE6 ist 10 Jahre alt!!!! IE7 existiert! IE8 existiert! IE9 steht vor der Tür!
0
T0mm1
T0mm113.07.1019:23
Wollte der Themenstarter nicht wissen, wie man in Mobile Safari Objekte am Mitscrollen hindert?
0
sierkb13.07.1019:48
T0mm1
Wollte der Themenstarter nicht wissen, wie man in Mobile Safari Objekte am Mitscrollen hindert?


1. gilt immer noch, was ich oben anfragte, nämlich:
Ganz konkretes Code-Beispiel oder eine Test-Seite sowohl in CSS als auch in Markup, das angeblich nicht klappen will, wäre nett und hilfreich. So aus der Luft und mit so spärlichen Infos ausgestattet, kann man nicht helfen.

2. hat fallen ebenfalls oben auf eine bestimmte Apple Develper Webseite verwiesen, wo zu dem Thema ebenfalls was geschrieben steht und dort Tipps zum besonderen UMgang mit dem Thema auf dem iPhone/iPad niedergeschrieben stehen, nämlich Abschnitt 3 (3. Check your viewport tag settings ) und insbesondere Abschnitt 4 (4. Modify code that relies on CSS fixed positioning )...
0
vetterjack
vetterjack01.08.1019:50
@Termi: Ich habe mir mal deine WebApp angeschaut und gesehen, dass du es schaffst, dass die Tool- und Navibar fixiert am oberen und unteren Rand sind. Wie machst du das?
Ich habe den z-index auf 100 und display:block, habe auch schon position:fixed ausprobiert, so geht es bei den Dektop-Browsern.
Hier mein Quellcode:
.toolbar{
    /*color: #979797;*/
    width: 320px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #c5c5c5), color-stop(1.0, #979797));
    height: 40px;
    margin: 0px;
    position: fixed;
    z-index: 100;
    display: block;
}
0
Termi
Termi02.08.1019:38
@vetterjack
Die Tool- und Navibar werden per Javascript eingeblendet, nachdem der Inhalt abgebildet ist. Ich nutze hierfür die Mootools, da ich das Ganze damit sehr einfach umsetzen konnte. Ich habe mir für meine Website eine Art Interpreter geschrieben, der den Content in XHTML übersetzt und ausgibt. Wird ein iPhone erkannt, werden Navigation und Metanavigation weggelassen und stattdessen Header und Footer eingeblendet. So blieb die iPhone Anpassung recht einfach. Du kannst Dir einfach die Datei skyynet.de/js/iphone.js herunterladen. Das sind im Prinzip die Mootools, erweitert um wenige Funktionen zum Anzeigen von Header & Footer.

@sierkb
Meine Frage war: Gibt es einen Trick, auf dem mobilen Safari ein Hintergrundbild am Scrollen zu hindern. Ich glaube, die Frage war wirklich einfach. Der CSS Befehl ist bei normalen Browsern
body { url(hintergrundbild.jpg) no-repeat fixed; }
. Mir hilft es nicht zu lesen, dass Apple empfiehlt, dies nicht zu nutzen und Anwendungen speziell für das iPhone anzupassen, auf dass Scrollen gar nicht mehr notwendig wird. Es geht nicht um beliebige Objekte, sondern um das Hintergrundbild. Die einfachste Antwort ist somit "geht nicht" und die nächst einfache wäre "guck mal unter xyz.de nach. Da funktioniert das. Alles Andere schaue ich mir dann im Sourcecode an.

Trotzdem Danke an alle, die mir interessante Hinweise gegeben haben.
0
Termi
Termi02.08.1019:51
@fallen
Habe mir mal touch.sproutcore.com/npr/ angesehen. Sieht nach interessantem Ansatz aus, der aber weit über das hinausgeht, was ich will und außerdem zumindest bei mir unter iOS 4 auf dem iPhone nicht korrekt angezeigt wird.
0
sierkb02.08.1021:19
Termi:

Wer oder was hindert Dich, Dein gewohntes

body { url("hintergrundbild.jpg") no-repeat fixed; }

wie bisher auch hier einzusetzen? Und zwar unter ausdrücklicher Berücksichtigung, im selben Dokument den Viewport des iPhones nochmal extra definiert zu haben bzw. zu triggern mittels des von Apple in obigem Dokument vorgeschlagenen und in näher erklärtem und auch bei Mozilla Fennec und Android hier übernommendem Trigger (meta-Element) für den Viewport
<meta name="viewport" content="width=device-width" />


Lies Dir auch mal folgendes Dokument von oben bis unten durch (inkl. der Kommentare zu diesem Thema!):
Doctyper: Fixed positioning in Mobile Safari
Vor allem auch den Kommentar von John Haugeland September 30, 2008, 7:18 pm

Mach's so, wie von ihm vorgeschlagen bzw. wie bereits von mir genannt, und es müsste/sollte mit Deinem Vorhaben klappen.

Hier eine (nicht unbedingt grundlegend saubere, aber wohl funktionierende) Workaround-Lösung, die das fixed-property einfach vom übergeordneten body-Element wegverlagert und in ein nachgeordnetes div packt:
0
vetterjack
vetterjack03.08.1014:06
@Termi: Weist du zufällig, wie man die Url-Leiste versteckt?
Ich habe mal gelesen, dass es damit gehen soll:
setTimeout(function(){
  window.srollTo(0,1);
},100);
Aber bei mir geht das net
0
Termi
Termi04.08.1012:01
@vetterjack
Doch, das geht. Du hast beim Testen vermutlich nur eine Zeile "Hello World" genutzt. Da ist dann nichts zum hinscrollen da. Der JavaScript Code scrollt ja den Bildschirm einen Pixel runter, was dann ein Ausblenden der URL Zeile bewirkt.

Folgendes habe ich gerade probiert und es klappt problemlos:

<html>
 <head>
  <title>test</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <script type="text/javascript">
   window.onload = function() { setTimeout(function(){window.scrollTo(0, 1);}, 100); }
  </script>
 </head>
 <body>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
  <p>toller content</p>
 </body>
</html>
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.