I have an 'account bar' fixed to the bottom of the screen using position:fixed and I'm auto hiding it when te user scrolls down the page using a plugin called headroom.js
This works perfectly on every browser except Android Browser (Samsung Galaxy Note 4 running Kitkat), because the Android browser has it's own toolbar at the bottom of the screen which is covering mine.
This wouldn't be a problem for most websites because when the user scrolls down the screen the android browser toolbar disappears, but unfortunately I am hiding my toolbar when the user scrolls down. When they scroll back up again my toolbar shows, but so does the browser toolbar over the top of it!
I can't think of a solution to this apart from moving the bar 40 pixels higher so it doesn't get covered. Unfortunately this would look ridiculous in all other browsers. Another option would be to browser sniff android browser and just not hide my toolbar ever, but browser sniffing seems old-fashioned. Feature detectin the prescense of a floaty browser toolbar is not possible though.
Any ideas would be greatly appreciated.