Bug with fixed section backgrounds on Firefox & Chrome
Hi there,
I have used the "fixed cover" section background setting to provide a simple parallax-like movement on my website to background images, but recently it does not work. I know the JS powered parallax option is there - but this does not work cross browser.
The last line of responsive.css is suddenly getting involved without changing theme version:
Given this is commented "Retina/iPad" I suspect this is only meant to fire for iPads and we understand why as iOS stuff is generally bad at cover & fixed backgrounds.
I think it is changes to Firefox and Chrome browsers that mean this line of code now fires for those browsers too. We love having the fixed option so It'd be great if new versions of Be|theme had a better way of targetting iPads and avoid this issue.
We're currently adding our own code in child style.css to handle this. This overides the scroll setting in responsive.css and then sets out new rules for detecting iPads. it also fixes background image sizes when using cover on iPad.
/*FIXED FIX*/
.section.bg-cover {
background-attachment: fixed !important;
}
/*IPAD*/
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#Content .section.bg-cover {background-size: auto 100% !important;background-attachment: scroll !important; }
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#Content .section.bg-cover {background-size: auto 100% !important;background-attachment: scroll !important; }
}
I have used the "fixed cover" section background setting to provide a simple parallax-like movement on my website to background images, but recently it does not work. I know the JS powered parallax option is there - but this does not work cross browser.
The last line of responsive.css is suddenly getting involved without changing theme version:
@supports( -webkit-text-size-adjust:none ) and ( not (-ms-accelerator:true) ){html,.section.bg-cover {background-attachment:scroll!important;}}Given this is commented "Retina/iPad" I suspect this is only meant to fire for iPads and we understand why as iOS stuff is generally bad at cover & fixed backgrounds.
I think it is changes to Firefox and Chrome browsers that mean this line of code now fires for those browsers too. We love having the fixed option so It'd be great if new versions of Be|theme had a better way of targetting iPads and avoid this issue.
We're currently adding our own code in child style.css to handle this. This overides the scroll setting in responsive.css and then sets out new rules for detecting iPads. it also fixes background image sizes when using cover on iPad.
/*FIXED FIX*/
.section.bg-cover {
background-attachment: fixed !important;
}
/*IPAD*/
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#Content .section.bg-cover {background-size: auto 100% !important;background-attachment: scroll !important; }
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#Content .section.bg-cover {background-size: auto 100% !important;background-attachment: scroll !important; }
}
Comments
what's your theme version? Because parallax was recently fixed.