search

louisremi / background-size-polyfill

Adds support for background-size "cover" and "contain" to IE8
http://louisremi.github.com/background-size-polyfill/
MIT License
1.26k stars 359 forks source link

Fix background-attachment: fixed for mobile browsers #27

Open jefferyto opened 11 years ago

jefferyto commented 11 years ago

background-attachment: fixed is often used with background-size: cover for a full window background image.

Unfortunately, mobile browser support for background-attachment: fixed is pretty poor; combined with background-size: cover, this often means the background image is stretched to the full height of the page, e.g. this thread at the CSS-Tricks forums.

It would be nice if we can do something about it ;-)

jefferyto commented 11 years ago

Before implementing this, we would need to figure out how to detect whether the user's browser supports background-attachment: fixed. Mobile browsers (at least iOS 6 and Chrome for Android) will happily accept and report 'fixed' if we assign it through CSS or JavaScript, so we can't query the browser directly.

I'd prefer to not do a blanket detect for "mobile browsers" as PPK's testing shows that some browsers (Android 4.1 default browser, HTC One) do support it. I can live with a whitelist of browsers to fix.

We would need position: fixed to fix background-attachment: fixed, so we'd also need to figure out whether it's supported in the user's browser. (jQuery Mobile has a whitelist function.)

Perhaps a !(background-attachment: fixed) && (position: fixed) whitelist will work? If I can get over the bad taste in my mouth I might give it a shot :-(

aendra-rininsland commented 10 years ago

I would love you forever if you did this. I'm currently using prinzhorn/skrollr as a workaround, which, while pretty functional, seems rather suboptimal...