Google Crome bug: related positioning & rounded corners. Simple solution.

A few days ago I have discovered for myself one more Google chrome bug - in a way how it handles rounded corners of relatively positioned elements. or even any other than default static positioning. To show this bug we will need two divs one inside of another one and outer should have smaller dimensions and rounded corners.

To see the issue just open this page in Google Chrom and in Firefox and you will see the difference on the following objects.

 
 
Relative positioning works wrong in Crome Default static positioning works fine

With the static object in most case there is no problem to change positioning, but how to solve this problem when inner object should be scrolled? As an example I would like to take small, but great javascript library Tiny Scrollbar. If the scrolled area has rounded corners, in Google Chrome we will get the same problem I have showed earlier in the article. So, how this can be solved at least till the time Google will fix the bug? I sugges to use static positioning and scroll content using negative margins. This solution should work in all browsers including Google Chrome after the bug fix. For example I am going to show the changes that should be applied to the Tiny Scrollbar to fix the problem.

So, here are the changes to the mentioned earlier library. CSS first:

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: static; }
#scrollbar1 .overview { list-style: none; position: static; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }

I have outlined changed lines and changed position properies (line 2,3). There are not so much changes, same with actual javascript. I am not publishing all of the code here as we need just to change one line in whole library. So, publishing just a part of it to show the line 43 that was changed - I hope this is simple:

( function( $ ) 
{
    $.tiny = $.tiny || { };

    $.tiny.scrollbar = {
        options: {
                axis       : 'y'    // vertical or horizontal scrollbar? ( x || y ).
            ,   wheel      : 40     // how many pixels must the mouswheel scroll at a time.
            ,   scroll     : true   // enable or disable the mousewheel.
            ,   lockscroll : true   // return scrollwheel to browser if there is no more content.
            ,   size       : 'auto' // set the size of the scrollbar to auto or a fixed number.
            ,   sizethumb  : 'auto' // set the size of the thumb to auto or a fixed number.
        }
    };

    $.fn.tinyscrollbar = function( params )
    {
        var options = $.extend( {}, $.tiny.scrollbar.options, params );
        
        this.each( function()
        { 
            $( this ).data('tsb', new Scrollbar( $( this ), options ) ); 
        });

        return this;
    };

    $.fn.tinyscrollbar_update = function(sScroll)
    {
        return $( this ).data( 'tsb' ).update( sScroll ); 
    };

    function Scrollbar( root, options )
    {
        var oSelf       = this
        ,   oWrapper    = root
        ,   oViewport   = { obj: $( '.viewport', root ) }
        ,   oContent    = { obj: $( '.overview', root ) }
        ,   oScrollbar  = { obj: $( '.scrollbar', root ) }
        ,   oTrack      = { obj: $( '.track', oScrollbar.obj ) }
        ,   oThumb      = { obj: $( '.thumb', oScrollbar.obj ) }
        ,   sAxis       = options.axis === 'x'
        ,   sDirection  = sAxis ? 'margin-left' : 'margin-top'
        ,   sSize       = sAxis ? 'Width' : 'Height'
        ,   iScroll     = 0
        ,   iPosition   = { start: 0, now: 0 }
        ,   iMouse      = {}
        ,   touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false
        ;

......... Code goes here..............
......... Code goes here..............

        return initialize();
    }

}(jQuery));

An that is is you may use the library as usual. I hope the code makes everything clear and do not require additional exlanations. As usual, please let me know if I have missed something or made some errors. And follow my blog to be notified about new posts.

Posted by:
Enjoyed this post? Share and Leave a comment below, thanks! :)