AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

A small blog.

Adding fixed position element breaks scrolling on Android 4.4 Nexus 4 Chrome Browser


Fixed position elements (elements with position:fixed css) have always been known to produce some quirks across different mobile browsers.  Fortunately, newer mobile browsers are slowly resolving some quirks. 

I had a strange quirk that prevented scrolling when you added an element with fixed positioning onto the page. In my case, I was adding a scroll-to-top button and fixing it to the bottom right using CSS.  The CSS went something like this:

.scroll-btn {
    position:fixed;
    bottom: 30px;
    right:15px;
    background-col ...
Read More ...
Tags:   scroll  android  fixed position  css  overflow  

modernizr: detect HTML5/CSS3 features not browsers, a simple quick start guide.


In a recent project, I used the new css3 property for 3d transforms to scale down an iframe preview window for websites. In testing compatibility, I realized that IE doesn't yet fully support 3d transforms for css3 - go figure. As this was part of a progressive feature set anyways I decided I could live without it on IE browsers (who uses this anymore anyways? ... ok I'm just kidding). My immediate thoughts was to detect browser type and disable the preview feature for all IE browsers and boy did this bring on bad flashbacks of my IE6-IE7 design days or what.

I decided to look a bit ...
Read More ...
Tags:   modernizr  how-to  css3  html5