Opera Mini supporting fixed position

Looks like an update to Opera Mini brought support for position: fixed at last. I’ll finally be able to remove my JS test for it. Up until the update, Opera Mini would lie about it’s support of the position, applying it like a position absolute but positioned offset from the viewport when the page first loads. This could result in content being trapped under elements that would “move” with the viewport in other browsers.

The JS I’ve been using looks like:

(function(_global, _doc){
    var _supports = false;
    var _html = _doc.documentElement;
    if(!(_global.operamini && ({}).toString.call(_global.operamini) === '[object OperaMini]')){
        var _el1 = _doc.createElement('div');
        _el1.style.cssText = 'top:0;height:10px;position:fixed;width:100%;';
        if(_el1.style.position === 'fixed' && _el1.getBoundingClientRect){
            var _body = _doc.body;
            var _hasBody = !!_body;
            if(!_hasBody){
                _body = _doc.createElement('body');
                _body.style.cssText = 'height:100%;width:100%;position:absolute;'
                _html.appendChild(_body);
            }
                        var _el2 = _el1.cloneNode();
            _el2.style.top = '100%';
            _el2.style.position = 'absolute';
            _el2.appendChild(_el1);
            _body.appendChild(_el2);            var _container = (++_body.scrollTop === _body.scrollTop && _body) || (++_html.scrollTop === _html.scrollTop && _html);
            _supports = (_container.scrollTop > 0 && _el1.getBoundingClientRect().top === 0)
            _body.removeChild(_el2);
            _container.scrollTop -= _container.scrollTop;
            if(!_hasBody){
                _html.removeChild(_body);
            }
        }
    }
    _html.className += ' ua-' + (_supports ? '' : 'no-') + 'fixed';
})(window, document);

I have to have fallback styles without the fixed positioning and use the ua-fixed class in my selectors for all styles related to fixed position.

Removing this will make the code easier to work on, remove the need for that blocking JS from my site, and ensure more users get the fixed appearance.

The fallback isn’t that great, and I’ve been meaning to improve it for a while. I’ve been thinking of updating how the fixed stuff works as well.

[update]Extreme mode doesn’t seem to support fixed, but it also doesn’t seem to lie about it, just positioning statically instead[/update]

Published by

Toby

I am a quiet person from Northeast Ohio. I work as a web developer. I like computers, music, and many other things.

Leave a Reply

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