Dissapointment

I had never used the CSS style:

background-attachment: fixed;

I was ecstatic when playing around with React to implement it, but as quickly as I discovered it’s use, I learned that mobile browsers have disabled it:

 

This style being, “disabled” on mobile made all my pretty little banners (intended to give a semi-parallax effect) become static, stretched, and dumb. Since mobile browsing is huge, this was not acceptable, thus I had to learn a little about the userAgent.

 


export class ParallaxBanner extends Component {
    constructor(props) {
        super(props);
        if(isMobileBrowser()){
            this.bannerClassNames = "hide-element";
        } else {
            this.bannerClassNames = "img-responsive-banner " + this.props.bannerType;
        }
    }

    render() {
        return (
            //... Highlight JS doesn't like embedded HTML elements...
                //part of the tag is missing...
            div className={this.bannerClassNames}/ 
        )
    }
}

export function isMobileBrowser() {
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    console.log("MOBILE");
    return true;
  }
 else {
     console.log("NOT MOBILE");
    return false;
  }
}

 

By conditionally applying a Display: None CSS class on mobile browsers, I can keep my nifty effect for Desktop browsers and suppress the images altogether for mobile users…

Living Example:

 

Bookmark and Share

Leave a Reply

Your email address will not be published. Required fields are marked *