When in Internet Explorer 11 the toolbar adds padding to the top of the body that pushes the body of the page too far past the toolbar itself. The expected behavior is that only enough padding is added to allow the toolbar to sit on top without covering the body. The correct behavior is observed in Chrome and FF.

Steps to reproduce:

  • Open Drupal Site in IE11(May occur in more IE versions)
  • Login to the site so that toolbar is present
  • Scroll down on the page then change the page size
  • Now scroll up and you should see a gap between the toolbar and the body of the page
CommentFileSizeAuthor
#3 IE11ToolbarOffset-2702891-3.patch766 bytesssneve90@gmail.com
#2 dom-padding-top.JPG58.79 KBssneve90@gmail.com
#2 Capture.JPG42.97 KBssneve90@gmail.com
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sjsneve created an issue. See original summary.

ssneve90@gmail.com’s picture

ssneve90@gmail.com CreditAttribution: ssneve90@gmail.com commented
FileSize
Capture.JPG42.97 KB
dom-padding-top.JPG58.79 KB

I've added some images that show what happens in this bug.

ssneve90@gmail.com’s picture

ssneve90@gmail.com CreditAttribution: ssneve90@gmail.com at Newscycle Solutions commented
Title: Internet Explorer adds excessive padding to body when toolbar present » Internet Explorer adds excessive padding to body when toolbar present and page resized after scroll
Status: Needs work » Needs review
FileSize
IE11ToolbarOffset-2702891-3.patch766 bytes

I looked into this issue and found that a parenthesis was not completely wrapping a ternary conditional operator for the expression that Internet Explorer uses to offset the toolbar. This happened in the file displace.js which seems to be used by multiple modules to calculate the offset.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

kristofferwiklund’s picture

kristofferwiklund CreditAttribution: kristofferwiklund at Websystem commented
Status: Needs review » Reviewed & tested by the community

I could reproduce the bug on IE11.

Patch solves the problem.

kristofferwiklund’s picture

kristofferwiklund CreditAttribution: kristofferwiklund at Websystem commented
Related issues: +#2751643: Body padding too large, displace calculation inconsistent (IE10, IE11, and iPad2)

Might conflict with this issue. #2751643: Body padding too large, displace calculation inconsistent (IE10, IE11, and iPad2)

snte’s picture

snte CreditAttribution: snte as a volunteer commented

Thanks kristofferwiklund for the hint, and sjsneve for the patch! I combined this patch with the related in #2751643 (for 8.3.x-dev), if that is OK. I think both make sense.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Chapter Three commented
Status: Reviewed & tested by the community » Fixed

Committed and pushed a1af653 to 8.3.x and 8cd9c2c to 8.2.x. Thanks!

The ternary is definitely incorrectly implemented obviously chrome and FF somehow copy with this but IE doesn't - and we don't have specific browser testing so we can not add an automated test for this.

  • alexpott committed a1af653 on 8.3.x 
    Issue #2702891 by sjsneve: Internet Explorer adds excessive padding to...

  • alexpott committed 8cd9c2c on 8.2.x 
    Issue #2702891 by sjsneve: Internet Explorer adds excessive padding to...

Status: Fixed » Closed (fixed)

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