I've got 1.4 installed on several sites, with the library versions mentioned in the README. In Internet Explorer, any version from 8 on up to 11, and on some administrative pages (including the node edit form), it isn't possible to scroll to the bottom of the page as long as the navbar module is active. The browser will scroll most of the way down, then jump to the top of the page.

This happens both when using our custom site theme with seven as an administrative theme, and after switching both the site theme and the administrative theme to Bartik.

Every other browser I've tested works fine.

If it helps, I have an older version of Navbar (7.x-1.0-alpha10+58-dev) running on another site, and it does not show this behavior.

It looks like a padding-top value on the body tag increases every time the user tries to scroll down.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

a1mpreza’s picture

I'm having the same issue.

ezra-g’s picture

We're having reports of the same issue by 2 other people in the Commons queue at #2189603: Unable to scroll down using MS IE 11.

ezra-g’s picture

Title: Strange scrolling problem in Internet Explorer » Unable to scroll down using IE 11

More descriptive titile.

troy.lutton’s picture

A number of my users have reported this issue in IE9. I seem to have found where the issue is coming from. The offending line is found around line 691 mark in navbar.js. At the end of the "render" function: ".css('padding-top', this.model.get('offsets').top)"

If you comment that out then the scrolling issue stops. However I stress that this is not a fix! This only seems to be an issue in IE as Chrome, Firefox and Safari all work ok.

joegraduate’s picture

FWIW, it seems that only pages that use Drupal's tableheader.js (sticky table headers) are affected by this problem.

designerbrent’s picture

Priority: Normal » Critical

Removing the offending line mentioned in #4 did the trick for me. This seems to be a critical issue as it is causing problems for any IE users.

pkil’s picture

For those that want to be able to keep the functionality comment #4 provides I just added some custom JS to a module which adds my own custom JS and CSS to my theme. This is the JS you might want to add if anyone is interested.
Note: You still need to comment out line 698 in navbar.js

(function ($) {

jQuery(window).ready(function() {
fix_nav_bar();

jQuery('button.navbar-toggle').each(function() {
jQuery(this).on('click', function() {
setTimeout(function() {fix_nav_bar();}, 500);
});
});
});

}(jQuery));

function fix_nav_bar() {
if(jQuery('#navbar-administration').height() < jQuery('#navbar-administration').width()) {
jQuery('body').css("padding-top", jQuery('#navbar-bar').height() + jQuery('#navbar-item--2-tray').height());
} else {
jQuery('body').css("padding-top", jQuery('#navbar-bar').height());
}
}

alantra’s picture

Commenting out the troublesome line of navbar.js (line 698) as per comment #4 above had an undesirable side-effect for me.

I'm using Drupal Commons 7.x-3.12, and while the hack allowed administrators (the only users who were affected) to scroll the page in IE, it caused the JavaScript navbar tray to obscure Drupal Commons' own header menu - in all browsers, not just IE.

Replace the troublesome line with .css("padding-top", jQuery('#navbar-bar').height()); and then at least Drupal Commons' header bar will be visible when the navbar tray is positioned on the left.

xpersonas’s picture

+1 - I too am having this problem.

aschmoe’s picture

Also this problem with IE + jQuery update. Here's a patch implementing the general concept of #8 with a check for horizontal tray orientation.

aschmoe’s picture

Version: 7.x-1.4 » 7.x-1.x-dev

Switching to dev branch, since true there as well.

aschmoe’s picture

Status: Active » Needs review
protitude’s picture

Confirmed patch in #10 fixed my issue in ie 10.

alantra’s picture

Comment moved to a different list

Leeteq’s picture

Title: Unable to scroll down using IE 11 » Unable to scroll down using IE

Correcting the title as it concerns several IE versions.

LeDucDuBleuet’s picture

Status: Needs review » Reviewed & tested by the community

I can confirmed patch in #10 fixed my issue in ie 10 & 11 as well with Drupal Commons 3.17.

Thank you very much! :-)

taw.boston’s picture

Will there be an update with a permanent fix for this? I have disabled the toolbar until there is, which allows IE to work, of course.

SocialNicheGuru’s picture

Status: Reviewed & tested by the community » Needs work
FileSize
8.93 KB
10.72 KB

Once I apply this, messages and buttons are now obscured by the navbar. Both elements used to show up under the navbar.

Chrome
Theme: Radix, OA Radix
Bootstrap library module is used with css and js enabled.

sethmac’s picture

This appears to have corrected my issue in IE11.

mglaman’s picture

SocialNicheGuru, can you provide some more debugging? We're using this in production and utilize Bootstrap without errors. Really need this patch as it breaks usability of the module without it.

freality’s picture

The true bug is within displace.js line: 133 of getRawOffset. window.scrollY and document.documentElement.scrollTop are not available in IE. The fallback property should be window.pageYOffset.

The attached patch fixes the issue.

vegardjo’s picture

Thanks, can confirm that #21 solved this issue for me. Only tested with IE10 on Win8

BenStallings’s picture

Status: Needs work » Reviewed & tested by the community

I can confirm that #21 solves the issue for IE11 on Windows 7 as well. Thank you, freality!

  • eshta committed 3c5a242 on 7.x-1.x authored by freality
    Issue #2183753 by freality: Fix displace scroll offset for IE
    
eshta’s picture

Status: Reviewed & tested by the community » Fixed

Thank you thank you for digging to the root cause of the problem.

eshta’s picture

Note: Submitted as a patch to Drupal 8: https://www.drupal.org/node/2378335

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Rajab Natshah’s picture

This issue is still happening. with 7.x-1.5 and 7.x-1.6 !!!

Rajab Natshah’s picture

Status: Closed (fixed) » Needs work
Rajab Natshah’s picture

After couple of hours of Troubleshooting ..
We find out that it's conflicting with CKEditor. when do have forms

eshta’s picture

Status: Needs work » Postponed (maintainer needs more info)

@RajabNatshah Do you have further information from your troubleshooting? Is there a change that needs to be made in navbar? If so please provide your findings and/or a patch submission. If this is something for CKEditor then this issue should be closed again.