Scroll issue on Firefox vs Webkit browsers - Side navigation, text truncate and scroll

user_4350476 0
Viewed 2217

I have an issue with scrollbar appearance on different browsers. In my example I would like to properly show truncated text inside side-navigation component but it is displayed incorrectly on Firefox/IE browsers.

Check out this fiddle on both Chrome and Firefox (code is not in the post since it takes up a lot of space):

https://jsfiddle.net/d84b9m49/10/

As you can see, the issue is positioning of the scrollbar in Webkit browsers in comparison to Firefox/IE, apparently Firefox displays scrollbar inside right padding area (total of 65px (width is set to 65px in style)) and Chrome displays scrollbar outside right padding area (total of 85px (65px + scrollbar width). In Firefox, when scrollbar appears, the content of the li item appears not centered and the part of the text is displayed below scrollbar (and horizontal scrollbar appears) and on Chrome everything looks correct (everything is centered). Also, the documentation describes this difference in handling scrollbar (ISSUE 1):

https://drafts.csswg.org/css-overflow-3/#scrollable

The previous solution involved using max-width: 65px (check out this fiddle) but this is not an option since, if there is only short text, the width of side navigation will shrink and the width should not change because of the text ( maybe there is some easy fix for this problem? )

Please do not disregard the layout of the navigation component on smaller devices, below 768px (on the provided example it becomes "bottom" navigation).

I would like to make the items inside navigation component centered in both Chrome and Firefox, let's ignore IE for now.

Can someone help me with this problem? Any help would be appreciated.

EDIT: For future reference, you can choose any of the upvoted answers below depending on your requirements (either go with the scroll check approach, or just remove scrollbars and add some arrows to scroll the content).

bootstrap-4 firefox cross-browser css html
3 Answers

From my comment, You can directly hide scrollbar by 

::-webkit-scrollbar { display: none;}

or calculate width of scrollbar by using JQuery and add same margin to body/container.

Try code something like this

var checkScrollBars = function(){
    var normalwidth = 0;
    var scrollwidth = 0;
    if($('body').prop('scrollHeight')>$('body').height()){
        normalwidth = window.innerWidth;
        scrollwidth = normalwidth - $('body').width();
        $('#container').css({marginRight:'-'+scrollwidth+'px'});
    }
}

and for horizontal scrollbar 

body{
overflow-x:hidden;
}

EDIT

from your comment, if you think its performance overhead calculate scrollbar width only once and add it by default on page load.

Check this way..

function scrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

Or call these functions(above two) only if the inner width lessthan some <80px like this

if ($(window).width() < 85px) {
   //your function
}
user_38409290

This will remove the scrollbar.

.nav.navbar.navbar-inverse::-webkit-scrollbar { width: 0 !important }
.nav.navbar.navbar-inverse { -ms-overflow-style: none; }
.nav.navbar.navbar-inverse { overflow: -moz-scrollbars-none; }

Check it on jsFiddle

Admin1

Its issue with Firefox scroll bar, We can fix this issue adding padding-right: 18px (which is scroll width) to the overflow-y element, Example

.navbar {
    padding: 0;
    background:  #283030;
    height: 100%;
    overflow-y: auto;
  padding-right:18px;
}
li.nav-item {
  width: 65px;
}

you can set 65px width now...

user_53463960
Related