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.
Comment | File | Size | Author |
---|---|---|---|
#21 | page_scroll_IE-2183753-21.patch | 795 bytes | freality |
#18 | messages-obscured-by-navbar.jpg | 10.72 KB | SocialNicheGuru |
#18 | error-ipe-buttons.jpg | 8.93 KB | SocialNicheGuru |
#10 | navbar-2183753-10-ie-navbar-issue.patch | 1.03 KB | aschmoe |
Comments
Comment #1
a1mpreza CreditAttribution: a1mpreza commentedI'm having the same issue.
Comment #2
ezra-g CreditAttribution: ezra-g commentedWe'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.
Comment #3
ezra-g CreditAttribution: ezra-g commentedMore descriptive titile.
Comment #4
troy.lutton CreditAttribution: troy.lutton commentedA 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.
Comment #5
joegraduateFWIW, it seems that only pages that use Drupal's tableheader.js (sticky table headers) are affected by this problem.
Comment #6
designerbrent CreditAttribution: designerbrent commentedRemoving 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.
Comment #7
pkil CreditAttribution: pkil commentedFor 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());
}
}
Comment #8
alantra CreditAttribution: alantra commentedCommenting 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.Comment #9
xpersonas CreditAttribution: xpersonas commented+1 - I too am having this problem.
Comment #10
aschmoe CreditAttribution: aschmoe commentedAlso this problem with IE + jQuery update. Here's a patch implementing the general concept of #8 with a check for horizontal tray orientation.
Comment #11
aschmoe CreditAttribution: aschmoe commentedSwitching to dev branch, since true there as well.
Comment #12
aschmoe CreditAttribution: aschmoe commentedComment #13
protitude CreditAttribution: protitude commentedConfirmed patch in #10 fixed my issue in ie 10.
Comment #14
alantra CreditAttribution: alantra commentedComment moved to a different list
Comment #15
Leeteq CreditAttribution: Leeteq commentedCorrecting the title as it concerns several IE versions.
Comment #16
LeDucDuBleuet CreditAttribution: LeDucDuBleuet commentedI can confirmed patch in #10 fixed my issue in ie 10 & 11 as well with Drupal Commons 3.17.
Thank you very much! :-)
Comment #17
taw.boston CreditAttribution: taw.boston commentedWill 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.
Comment #18
SocialNicheGuru CreditAttribution: SocialNicheGuru commentedOnce 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.
Comment #19
sethmac CreditAttribution: sethmac commentedThis appears to have corrected my issue in IE11.
Comment #20
mglamanSocialNicheGuru, 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.
Comment #21
freality CreditAttribution: freality commentedThe true bug is within displace.js line: 133 of
getRawOffset
.window.scrollY
anddocument.documentElement.scrollTop
are not available in IE. The fallback property should bewindow.pageYOffset
.The attached patch fixes the issue.
Comment #22
vegardjo CreditAttribution: vegardjo commentedThanks, can confirm that #21 solved this issue for me. Only tested with IE10 on Win8
Comment #23
BenStallings CreditAttribution: BenStallings commentedI can confirm that #21 solves the issue for IE11 on Windows 7 as well. Thank you, freality!
Comment #25
eshta CreditAttribution: eshta commentedThank you thank you for digging to the root cause of the problem.
Comment #26
eshta CreditAttribution: eshta commentedNote: Submitted as a patch to Drupal 8: https://www.drupal.org/node/2378335
Comment #28
Rajab Natshah CreditAttribution: Rajab Natshah commentedThis issue is still happening. with 7.x-1.5 and 7.x-1.6 !!!
Comment #29
Rajab Natshah CreditAttribution: Rajab Natshah commentedComment #30
Rajab Natshah CreditAttribution: Rajab Natshah commentedAfter couple of hours of Troubleshooting ..
We find out that it's conflicting with CKEditor. when do have forms
Comment #31
eshta CreditAttribution: eshta at Acquia commented@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.