Container mit Hintergrundbild - Einstellung Fix (true/false) spielt im Browser keine Rolle

    Layout Poster Responsive

    Zeta Producer 13.3.0 Business

    Hallo zusammen,

    ich habe zwischen zwei Container einen Container mit einem Hintergrundbild eingefügt. Zum testen jeweils mit (Fix (true) und (Fix (false)

    In der Voransicht in der Anwendung passt das: da fließen die Container über das Hintergrundbild hinweg. Und so will ich das haben.

    Im Browser schließlich (egal ob lokal oder online, ob Firefox oder IE) wird immer nur der obere Teil vom Bild fix dargestellt. Dabei merke ich zwischen der Einstellung Fix true/false keinen Unterschied

    Website: http://www.koester-itbc.de/leadsolution.php

    Mache ich hier was falsch?

    Vielen Dank im Voraus

    Mit freundlichen Grüßen

    Jörn Koester

    Hallo,

    also, wenn ich durch die Seite scrolle, sehe ich einige "Schlitze", durch die ich mindestens 2 verschiedene, feststehende Hintergrundbilder sehe (ein Blau getöntes und eines eher schwarzweiss, beides anscheinend Messeszenen). Die Bilder erstrecken sich jeweils über die gesamte Inhaltshöhe, also von unter der Navigation bis zum unteren Fehsterrand. Sieht für mich so ok aus.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Hallo Herr/Frau Seitz,

    das ist richtig: das sind Schlitze, hinter den ich ein Bild als Hintergrundbild eingefügt habe. Wenn ich nun IN DER ANWENDUNG die Seite hoch und runter scrolle, bleibt das Hintergrund in der Position stehen und die Inhalte scrollen drüber. Da ist es genauso, wie ich es mir vorstelle.

    Wenn ich die Website sowohl Lokal bei mir auf dem Browser als auch auf dem Webserver anschaue, dann bewegt sich das Bild im Hintergrund einfach mit. Somit ist der tolle Effekt nicht mehr da und man erkennt - so wie Sie :) - nicht, was auf dem Bild zu sehen ist.

    Also am Webserver hängt es auch nicht. Ich habe das Gefühl, dass die Einstellung "FIX true/false" keine Auswirkung hat und dort der Fehler liegt. Ich bin mir aber nicht sicher..

    Haben Sie eine Idee?

    VG

    Jörn

    Und so würde ein Bild zum Beispiel aussehen:

    Hallo,

    also wie gesagt, bei mit hat sich nur das 1. Bild mitbewegt und die anderen nicht. Für mich war der Effekt also vorhanden. Sie scheinen etwas anderes zu sehen. Vielleicht hilft es ja, wenn Sie Ihren Browser-Cache löschen?

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Hallo Herr Seitz,

    also jetzt habe ich an meinem Notebook ausprobiert. Dort geht es mit Windows Edge (38.14393...) auch nicht, aber mit dem Internet Explorer (11) schon... (wobei es furchtbar ruckelt, obwohl das Notebook eine gute Leistung hat (Lenovo, i7, 8GB RAM, schnelle Internetverbindung))

    An meinem PC funktioniert es weder mit EDGE noch mit Firefox (53.0.2)!!! Auch nachdem ich mal alles aus dem Cache entfernt habe.

    Dann ist das aber suboptimal, wenn das Layout nur mit einem Browser läuft... Schade!

    Können Sie bitte überprüfen?

    Vielen Dank im Voraus

    Jörn Koester

    Hallo Herr Seitz,

    auf meinem 2. Notebook mit Windows7 und funktioniert es perfekt mit IE11 und mit Chrom 57.0.2987...

    Ist das Bekannt, dass dieses Layout Probleme mit Windows Edge hat?

    Hallo,

    hat eines der beiden Geräte zufällig auch einen Touchscreen?

    Verstehe ich Sie richtig, dass es auf beiden Geräten weder in Firefox noch in Edge funktioniert, der Fehler also generell nur in diesen beiden Browsern vorliegt?

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Hallo Stefan,

    nein, weder auf meinem Notebook noch bei meinem PC habe ich ein Display mit Touchscreen.

    Nochmals das Problem:

    Es gibt Darstellungsprobleme mit den Browsern EDGE und Mozialla . Bei InternetExplorer geht es wiederum. Diesen Fehler habe ich auf unterschiedlichen Rechnern gesehen und kann somit nicht an den Einstellungen des Browsers liegen.

    Bei Edge werden die Hintergrundbilder mit dem Inhalt verschoben. Sprich man sieht immer nur diesen Ausschnitt, der zudem auch nicht scharf dargestellt wird.

    Bei InternetExplorer bleiben die Hintergrundbilder stehen und die Inhalte scrollen drüber. Die Bilder werden in der richtigen Auflösung (also richtig scharf) angezeigt – so wie es sein sollte.

    Ausgetestet mit:

    - verschiedenen Rechner mit Windows 10 (64 & 32 bit)

    - verschiedenen Browsern (Edge, Mozilla, IE)

    Betriff:

    URL: http://www.koester-itbc.de/leadsolution.php

    Layout: Poster Responsive

    Version: 13.3.0 Business

    Hallo,

    in Edge kann ich das verhalten nun auch sehen. Da wird das Bild extrem groß dargestellt und auch nicht fixiert. Hier handelt es sich um einen Bug im Browser. Daran können wir leider nichts ändern und ich habe auch bisher noch keinen Workaround finden können.

    In Firefox (und auch nicht in Chrome, oder Safari auf dem Mac) kann ich dieses Verhalten allerdings nicht nachvollziehen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Hallo,

    ich glaube ich konnte nun doch noch einen Workaround für Edge finden und habe das mal in ein Online-Update eingebaut, dass in ca. 30 Minuten verfügbar sein sollte (nur für Version 14 - einfach auf "Extras > Updates suchen" klicken).

    Ich hoffe, das hat keine unangenehmen Nebenwirkungen, wenn überhaupt, sollte es aber nur den Edge-Browser betreffen.

    Falls es die Experten interessiert: Edge unterstützt übrigens eigentlich fixierte Hintergrundbilder schon, im Layout Poster Responsive müssen wir aber für manche Elemente auch ein translate: translate3d(); und wenn das auf ein Vater-Element eines fixierten Hintergrundbilds angewandt ist, steigt der Edge aus und fixiert das Bild nicht mehr.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Dieses Online-Update ist in ca. 30 Minuten dann auch für Version 13 verfügbar.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Hallo Stefan,

    wie komme ich an dieses Update? Wenn ich bei meiner Version auf Update klicke, dann erhalte ich die Info, dass die Version 14 verfügbar ist, und diese kostenpflichtig ist.

    Wie kann ich meine 13.3.0 Version updaten?

    Vielen Dank!

    Jörn

    Hallo,

    das Update galt nur für das Layout "Poster Responsive". Wenn Sie im Projekt mal auf den Layout-Button klicken, sollten daraufhin im Hintergrund eigentlich auch Layout-Updates geladen werden.

    Wann das letzte Layout-Update geladen wurde, sehen Sie dann auch unter "Hilfe > Programminfo > Support-Informationen > Letztes Content-Update"

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Frage:

    "In Firefox (und auch nicht in Chrome, oder Safari auf dem Mac) kann ich dieses Verhalten allerdings nicht nachvollziehen."

    Habt Ihr Sie keine Möglichkeiten auf Windows-Rechner zu testen?

    Wir haben nur Windows 10 Rechner (64 & 32 bit) im Einsatz. Also bei Firefox kann ich das auch auf allen Rechner bei uns feststellen. Alle Rechner sind auf den aktuellen Stand (Betriebssysteme und Browser)

    Hallo,

    da müssen Sie was mißverstanden haben. Wenn wir sagen "können wir nicht nachvollziehen" bedeutet das nicht, dass wir es nicht testen konnten. Es bedeutet, dass wir getestet haben, den Fehler aber bei unseren Tests nicht provozieren bzw. sehen konnten.

    Tritt der Fehler bei Ihnen auch nach dem laden des Online-Updates noch in Firefox auf? Wenn ja, wie ist die URL der Seite die den Fehler enthält und was sind ist die genaue Versionsnummer von Ihrem Firefox?

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Website neu erstellt (F6) und Komplette Website veröffentlich: Keine Änderung bei Firefox!

    Um einen Unterschied zwischen der Attach: Fix Eigenschaft zu sehen, beim ersten Bild auf False und beim zweiten Bild auf True gesetzt.

    Website wieder neu erstellt, Website komplett hochgeladen, und nochmals getestet. Kein Unterschied!!

    Das hängt wahrscheinlich mit dem Punkt Attach zusammen, auf das ich zu Beginn schon hingewiesen habe.

    Um den Fehler besser darzustellen, habe ich eine Schrittaufzeichnung beim Scrollen gemacht. (Fehler3.zip)

    Bitte zuvor mit den Betriebssystemen auch testen, die ich zuvor auch schon genannt habe (Windows 10 - 64 Bit und 32 Bit)!

    Bin ziemlich genervt wegen diesem Thema. Wie kann Version 14 herausgegeben werden, wenn Version 13 noch nicht mal richtig funktioniert??

    Mfg

    Jörn Koester

    Ich habe mir die Seite eben in Firefox angesehen da war alles in Ordnung. Ggf. sollten Sie mal Ihren Browser-Cache löschen? Welche Firefox-Version Sie genau nutzen haben Sie mir leider noch nicht verraten, das könnte ggf. helfen, den Fehler nachzuvollziehen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Jetzt habe ich das mit meinem Smartphone Samsung S8 und mit meinem iPad ausprobiert. Auch hier passt es nicht!

    Wie haben Sie die Einstellung bitte getestet?

    Firefox 54.01.1 (32Bit auf den einen Rechner)

    Wie gesagt, auf meinem iPad mit Safari und auf meinem Smartphone S8 mit Chrome geht es auch nicht!

    Für mich unbegreiflich!

    Ich öffne die Seite in Firefox, scrolle nach unten. Das erste Container-Bild scrollt mit, die anderen waren fixiert.

    Browser auf mobilen Geräten z.B. iPad unterstützen fixierte Hintergrundbilder aus Performancegründen oft nicht. Das ist Systembedingt so und da können wir nichts machen.

    Zunächst sollten wir also klären, warum bei Ihnen die Container-Bilder in Firefox nicht fixiert sind. Entscheidend hierfür ist zu wissen, welche Firefox-Version Sie genau nutzen und sicherzustellen, dass sie nicht noch eine alte Version der Seite im Browser-Cache haben. Wenn es dann noch andere Desktop-Browser gibt, in denen es nicht funktioniert, nehmen wir uns diese einen nach dem anderen vor.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Und nochmals: wie ich Anfangs geschrieben haben, haben wir die Einstellung auf allen Rechnern von uns getestet. Es liegt definitiv nicht am lokal installieren Browser und an dem Cache. Diese These wird durch die Tests auf meinem iPad und meinem Smartphone bekräftigt. Und schauen Sie sich mal bitte unsere Website an und schauen Sie was wir machen - Browser-Cache ist bei uns die erste Anlaufstelle...

    Dass Sie den Fehler nicht nachvollziehen können, verstehe ich nicht!

    Und nochmals die Frage: wie kann die Version 14 herausgegeben werden, wenn die Version 13 noch fehlerbehaftet ist?

    Am 06.02. haben wir von der Express-Version auf die Business-Version umgestellt. Seitdem haben wir 3 Fehler gefunden, von denen 2 durch Update behoben worden sind. Beim 3. Fehler sind sie noch auf der Suche! Fehler, bei denen wir nichts können, wir aber viel Zeit und Energie hineingesteckt haben!

    Ärgerlich: Kunden die seit dem 01.03.2017 die Lizenz erworben haben, bekommen das Update kostenfrei! Dass wir aus Kulanz keine 14er Version kostenfrei erhalten, ist sehr schwach und unverständlich.

    Mfg

    Jörn Koester

    Nochmals Cache geleert. In EDGE geht das nun, in Mozilla aber nicht. Andersherum wäre es mir egal, denn unsere User nutzen meist IE oder Mozilla.

    Und bei Mozialla habe ich auch die aktuellste Version - das habe ich sicherheitshalber auch überprüft. Bloß wäre das auch dämlich, denn so wie ich die Rechner unseren Kunden kenne :) ist dort meistens nie die aktuelle Version installiert. Für die machen wir aber die Website....

    Wie gesagt: Bild1 = Fix false / Bild1 = Fix true (Damit man gleich den Unterschied sieht!)

    Ich möchte Ihnen ja gerne helfen, dazu sollten Sie mir aber schon sagen, in welcher Firefox Version Sie den Fehler bzgl. nicht fixierter Container-Bilder sehen bzw. generell meine Fragen beantworten. Nur so kann ich Firefox in der selben Version testen. Weitere Antworten folgen dann morgen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    PS: ich brauche die genaue Versionsnummer. Browser werden oft rollierend ausgerollt und da ist dann die "neueste" Version für Sie oft eine andere als für mich. Ich vermute auch, Sie meinen den Browser namens Firefox, wenn Sie Mozilla sagen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Guten Morgen,

    da es hier langsam etwas unübersichtlich wird, fasse ich nun nochmal kurz zusammen, um was es hier nach meinem Verständnis geht.

    Auf der Seite http://www.koester-itbc.de/leadsolution.php wurden mehrere Container mit Hintergrundbild angelegt. Das Hintergrundbild des 1. Containers ist so eingestellt, dass es mit dem Inhalt mitscrollt, die nachfolgenden Container haben fixierte Hintergrundbilder, die nicht mit dem Inhalt mitscrollen sollen.

    Es stellen sich hierbei 2 Probleme dar:

    1. In manchen Browsern scrollen die fixierten Container-Hintergrundbilder trotzdem mit dem Inhalt mit
    2. in manchen Browsern werden die fixierten Container -Hintergrundbilder in einer falschen Größe dargestellt

    Diese Probleme können je nach Browser entweder nur einzeln oder sogar in Kombination (also beide Probleme gleichzeitig auftreten).

    Problem 1

    Trat anscheinend nur in Microsoft Edge und Mozilla Firefox auf.

    • Den Fehler in MS EDGE haben wir bereits per Online-Update behoben.
    • Den Fehler in Firefox 54.01 konnten wir nun auch nachvollziehen und haben ein Online-Update für Version 13 und 14 veröffentlicht, das in ca. 30 Minuten erscheinen wird.

    Problem 2

    Betrifft eigentlich nur die mobilen Browser auf Geräten mit Touchscreens (iPad, iPhone, sonstige Smartphones und Tablets). Diese Browser unterstützen fixierte Hintergrundbilder bewusst nicht, weil sonst die Scroll-Performance der Geräte negativ beeinträchtigt würde. In diesem Zusammenhang werden dann fixierte Bilder in einer falschen Größe dargestellt.

    Da dies ein sehr spezieller Fall ist, möchten wir dies zunächst nicht per Online-Update, das alle Nutzer betreffen würde, beheben, sondern schlagen vor, folgendes CSS im Projekt einzusetzen (das CSS schaltet fixierte Hintergrundbilder auf Touch-Geräten bewusst auf scrollend (weil Sie eh nicht fixiert wären) und behebt damit die falsche Darstellungsgröße):

    • Klicken Sie im Menü Website auf "Einstellungen"
    • Klicken Sie auf CSS
    • Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"
    CSS
    <style>
.touch .zpContainer.styled{ background-attachment: scroll !important;}
</style>


    Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

    Ich hoffe, dass wir nun beide Probleme erfolgreich beheben konnten.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Hier: Letztes Content-Update: 11.07.2017 15:51 (vor 21 Stunden)

    Und das auch nur, weil Version 13 maximal ein mal in 24 Stunden auf Updates prüft. Das heutige Update ist definitiv verfügbar.

    Wenn Sie im betreffenden Projekt auf den "Layout"-Button klicken, sollte dies eine Update-Prüfung verursachen. Sie können dann im offenen Layout-Editor auch ohne Änderungen abbrechen. Kurz danach sollte dann ein online-update geladen werden. Vorausgesetzt, Sie nutzen auch die aktuellste Version 13.3.0 und nicht etwa eine ältere.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Wir verwenden natürlich schon die aktuelle Version.. dadurch wurden die ersten beiden Fehler, die wir hatten schließlich behoben!

    Anbei die Infos vom ZETA-Producer: (natürlich auch nochmals Programm komplett geschlossen und neu gestartet!)

    • Titel: Zeta Producer 13
    • Version: 13.3.0.0
    • Versionsname: Business
    • Datum: 05.10.2016 16:23 (vor 9 Monaten)
    • Lizenz: xxxxxxxxxxxxx
    • Sprache: de
    • Kultur: de-DE
    • UI-Kultur: de-DE
    • Letztes Content-Update: 04.07.2017 16:47 (vor 1 Woche)
    • Web-Projekt: C:\Users\jkoester\Documents\Zeta Producer 13\projects\KOESTER-ITBC-03
    • Projektvorlage: Poster Responsive - Sport
    • Layout: Poster Responsive
    • Layout vorhanden: Ja
    • Variante: 04-sport-angepasst-2
    • Variante vorhanden: Ja
    • Gesamtanzahl Seiten: 15
    • Anzahl inaktiver Seiten: 0
    • Anzahl aktiver Seiten: 15
    • Anzahl Bilder: 65
    • Anzahl Dateien: 7
    • Zuletzt geändert: 29.06.2017 10:25 (vor 1 Woche)
    • Zuletzt veröffentlicht: 12.07.2017 14:24 (vor Sekunden)

    Hier stimmt doch gar nichts mehr:

    - Letztes Content-Update kann nicht letzte Woche gewesen sein, den das war gestern!

    - Zuletzt geändert: das war heute, weil ich sehen wollte, ob er die Änderungen auch veröffentlich hat.

    - Datum: 05.10.2016 16:23 Ist das das Datum, an dem die Version 13.3.0 veröffentlich wurde?? Dann frage ich mich, warum die Anwendung nach der Installation nicht automatisch nach den Updates schaut!? Denn wir wurden erst am 20.03. auf die neue Version hingewiesen. (diese Aussage hat uns ein Ticket gekostet!) und die Anwendung haben wir einige Tage zuvor komplett neu installiert!

    Als Beweis, dass ich entsprechend richtig vorgegangen bin, finden Sie unten die letzte Schrittaufzeichnung.

    Stefan, ich mag nicht mehr...dann ist das halt so und meine Website hat den Darstellungsfehler.

    Ich kann und mag jetzt wirklich nicht mehr Zeit hier reinstecken.

    Um das abzukürzen, hänge ich Ihnen die letzte Version des aktualisierten Layouts für Zeta Producer 13.3 einfach hier als ZIP an: Poster Responsive.zip

    • Laufenden ZP beenden.
    • Das ZIP entpacken und dann den Ordner "Poster Responsive" in den Unterordner "\Packaging\Layouts\" des Installationsverzeichnis von Zeta Producer (normalerweise C:\Users\IHR_USERNAME\AppData\Local\Zeta Producer 13\Packaging\Layouts ) verschieben und den bestehenden Ordner mit selbem Namen ggf. ersetzen.
    • ZP wieder starten
    • STRG-SHIFT-T drücken.
    • Danach dann noch das angepasste CSS im Projekt eingeben, damit die Bildgröße auf Tablets etc. stimmt.
    • Dann "Erweitert > Erstellen > Alle Seiten erstellen" und veröffentlichen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden