iOS 14 - Anpassung zu Hintergrundbildern

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.

Über CSS kann somit auf iOS älter 14 eingegangen werden, was wir anhand der Inhaltsbereich-Variante 100 nachfolgend 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;  

  > .backgroundContainer > div, > .backgroundContainer > picture {
    background-attachment:fixed;
        
    @at-root .ios #{&} {
      background-attachment:inherit;   
    }      
        
    @at-root .ioslt14 #{&} {
      background-attachment:inherit;
      position:fixed;
      pointer-events:none;      
    }   
  }  
}