Veröffentlichungsdatum: 30. September 2020
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Mit iOS 14 ergibt sich im Browser ein geändertes Verhalten z.B. in Bezug auf Hintergrundbilder mit Parallax-Effekt.
Bestehende Projekte zeigen dann ggf. das Verhalten, daß fix positionierte Hintergrundbilder nicht mehr wie gewünscht dargestellt werden.
Auf dieses Verhalten geht die aktuellste ui.js JavaScript-Datei unter Weblication® CMS 15 ein.
Die Seite wird beim Einsatz von IOS älter als Version 14 durch die
Klasse ioslt14 ergänzt, um so auf das geänderte Verhalten von IOS 14,
z.B. in Bezug auf Hintergrundbilder, per CSS einzugehen. IOS unterstützt offensichtlich ab Version 14 keine fixierten Hintergrundbilder mehr.
Über CSS kann somit auf iOS älter 14 eingegangen werden, was wir anhand der Inhaltsbereich-Variante 100 nachfolgend für CMS-Installationen ab CMS-Version 17 zum BASE-Projekt aufzeigen.
/*@wCssFragment{class:elementSectionParallaxBackground;variant:100;caption:Hintergrund ist fixiert;caption-en:Fix position}*/ .elementSectionParallaxBackground_var100 { -w-option-backgroundimageAsPicture:0; > .backgroundContainer > div, > .backgroundContainer > picture { background-attachment:fixed; @at-root .ios #{&} { background-attachment:inherit; position:fixed; pointer-events:none; } } }
/*@wCssFragment{class:elementSectionParallaxBackground;variant:100;caption:Hintergrund ist fixiert;caption-en:Fix position}*/ .elementSectionParallaxBackground_var100 { -w-option-backgroundimageAsPicture:0; /* Responsive-Picture-Element darf hier nicht genutzt werden */ -w-additionalClasses:wglParallaxBackground=yes; -w-option-parallaxbackgrounddirection:fixedIfNotSupported; /* Definiert, dass unter iOS die Fixierung per JS erreicht wird. */ > .backgroundContainer > div, > .backgroundContainer > picture { background-attachment:fixed; @at-root .ios #{&} { background-attachment:inherit; } @at-root .ioslt14 #{&} { background-attachment:inherit; position:fixed; pointer-events:none; } @at-root .ios.crios #{&} { background-attachment:inherit; position:relative; } } }