iOS 14 - Anpassung zu Hintergrundbildern

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.

Inhaltsbereich Variante 100 Umsetzung VOR iOS 14

/*@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;      
    }  
  }  
}

Inhaltsbereich Variante 100 Umsetzung AB iOS 14

/*@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;
    }
  }  
}