Chris J. Lee

Dallas Drupal Developer

You are here

Android 2.x Overflow-x / Overflow-y bug

Recently, i've been working on a project that needed a fix for this particular bug.

What is this overflow-x overflow-y bug?

On the android stock browser, it doesn't really support any overflow css at all. I've tested it with the Samsung galaxy S3 browser.

Symptoms:

This particular bug will often possess the following symptoms:

  • Causes many layout issues.
  • Breaking floats.
  • Missing background images.
  • Background images don't get rendered.
  • Similar symptoms to when you're missing a closing div.

Solutions for Android Bug

My first instinct is to feature detect via Modernizr. This is always the best approach. Unfortunately, i tested out several different feature tests and they both return true on the Android stock browser. The following will return true on the stock android browser:

  • Don't use overflow-x and overflow-y
  • set overflow-x and overflow-y both to auto
  • overflowscrolling
  • overflow-x (Via Modernizr.addTest())
  • overflow-y (Via Modernizr.addTest())

It's also been reported that this is the case with this stackoverflow user.

Meet Overthrow.js

I haven't tried this particular shim/polyfill; but it seems like the best overall solution. Overthrow is a polyfill that uses it's own feature detection in it. It has the ability to shim and fix these issues.

From the website:

Overthrow.js is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and ensuring a usable experience in all browsers.

Use the stock browser test

Although this is not very future friendly, it might be more sensible to take this approach given that the Samsung galaxy stock browser is an edge case (AFAIK).

jQuery(document).ready(function($) {

        var nua = navigator.userAgent,
            is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));

        if(is_android === true) {
            $('body').addClass('is-android');
        }

})(jQuery);

What I ended up doing

This isn't an ideal solution. But what i ended up doing was setting overflow-x and overflow-y to auto for android devices. I also had used the script above to add a class to the body. This isn't the best solution; but it was the most pragmatic solution.

Resources

© 2017 Chris J. Lee