Differences between Firefox and Webkit browsers when it comes to scrolling - How side navigation, text truncation, and

Question

Differences between Firefox and Webkit browsers when it comes to scrolling - How side navigation, text truncation, and

Scrollbar appearance is causing an issue across different browsers. The truncated text in my side-navigation component is not displaying correctly on Firefox and IE browsers.

View this fiddle on both Chrome and Firefox:

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

Upon inspection, the scrollbar positioning is different in Webkit as opposed to Firefox/IE. In Firefox, the scrollbar appears within the right padding area of 65px (as specified in the style), while Chrome displays it outside the padding area, totaling 85px (65px + scrollbar width). In Firefox, when the scrollbar appears, the content inside the li items is off-center with some text partially hidden below the scrollbar (triggering a horizontal scrollbar) whereas in Chrome, everything remains centered. Refer to the documentation for more details about this scrollbar handling difference (ISSUE 1):

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

A prior solution was applying max-width: 65px (refer to this fiddle) but this approach is not ideal when dealing with short text that may cause the navigation's width to fluctuate undesirably.

Ensure the navigation component layout is maintained on smaller devices under 768px (in the example provided, it switches to "bottom" navigation).

The goal is to have the items in the navigation centered on both Chrome and Firefox, disregarding IE for now.

If anyone could provide assistance with this issue, any help would be greatly appreciated.

EDIT: For future reference, refer to the upvoted answers below based on your specific needs (either adopt the scroll check method or opt to remove scrollbars while adding scrolling arrows).

html css firefox cross-browser bootstrap-4

Answer 1

Answer №1

To hide the scrollbar directly from my comment, you can use the following CSS:

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

Alternatively, you can calculate the width of the scrollbar using jQuery and add the same margin to the body/container.

You can try coding 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'});
    }
}

For horizontal scrollbar only:

body{
overflow-x:hidden;
}

EDIT

As per your comment, if you are concerned about performance overhead, you can calculate the scrollbar width only once and add it by default on page load.

You can do it 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 is less than some <80px like this:

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

Answer 2

To hide the scrollbar directly from my comment, you can use the following CSS:

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

Alternatively, you can calculate the width of the scrollbar using jQuery and add the same margin to the body/container.

You can try coding 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'});
    }
}

For horizontal scrollbar only:

body{
overflow-x:hidden;
}

EDIT

As per your comment, if you are concerned about performance overhead, you can calculate the scrollbar width only once and add it by default on page load.

You can do it 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 is less than some <80px like this:

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

Answer 3

Answer №2

To eliminate the scrollbar, use the following CSS code:

.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; }

View it in action on jsFiddle

Answer 4

To eliminate the scrollbar, use the following CSS code:

.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; }

View it in action on jsFiddle

Answer 5

Answer №3

There seems to be a problem with the scroll bar in Firefox, but it can easily be fixed by adding some CSS code. Simply include padding-right: 18px (which is the width of the scroll bar) to the element with overflow-y property. Here's an example:

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

By setting the width to 65px, the issue should be resolved.

Answer 6

There seems to be a problem with the scroll bar in Firefox, but it can easily be fixed by adding some CSS code. Simply include padding-right: 18px (which is the width of the scroll bar) to the element with overflow-y property. Here's an example:

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

By setting the width to 65px, the issue should be resolved.

Differences between Firefox and Webkit browsers when it comes to scrolling - How side navigation, text truncation, and

Answer №1

Answer №2

Answer №3

Similar questions

Spontaneous Lettering using HTML Tags

Hovering into Transition Time

What is causing the clickAt function to fail in Selenium IDE?

Is it possible to obtain the index of a table row using querySelector?

Difficulty with linking a CSS property to an HTML element using JavaScript

What is the best method for creating a fade effect on a div background?

Can you tell me what is creating the space between the elements in this form?

Responsive design of HTML forms

Using React to wrap a cards-deck inside a cards component with plain bootstrap styling

What is the best way to manage selected checkboxes in PHP?

What possible reason could there be for the empty space on the left side?

How to achieve a text border effect using inner glow technique

Enhancing Twitter Bootstrap with custom media queries for an extra-small breakpoint

How can I incorporate a personalized SVG path to serve as a cursor on a webpage?

What is the best way to use border radius on a canvas element similar to a div in order to create a

The footer moves upwards when a file is downloaded

Load JavaScript files in order within the <body> tag and trigger a callback function when all files have

Using Jquery to encase an element in a div while scrolling down and removing it while scrolling up

Exploring the concept of nested views in AngularJS's UI Router with multiple views integration

Email confirmation section