Affected Environments:
--------------------
Windows7 - Internet Explorer11
iPad2 - Only while rotating the device

NOTE: This does not appear to affect Macs in General or Windows 10 (IE or Google Chrome)

Steps to reproduce:
-----------------
Install the latest version of Drupal
Using the Bartik theme (not sure if it applies to others)
Switch to a Windows machine (I was using Windows 7 and IE11)
Log in
Create a long piece of content
Scroll down
Resize your window
Scroll up
Notice that the body element now has inline css of "padding-top: {some_crazy_huge_number}"
NOTE: This does NOT happen on a mac using Safari, Chrome, or Firefox, so I am leaning towards some JS somewhere is going wonky.

Expecting:
---------
I was expecting that the padding would be a normal size and I wouldn't see a very large toolbar

Bug:
----
The padding goes crazy and if you had a long article it doubles the length of the body you were looking at. See gif below:

Padding on toolbar is excessively large

More Info:
---------
I am going to let someone else who is a heavy Windows user solve this one, I am a heavy mac user. Just needed to do some testing on another issue.

Comments

ccjjmartin created an issue. See original summary.

Chernous_dn’s picture

I think problem with this core\modules\toolbar\js\views\BodyVisualView.js

49: .css('padding-top', this.model.get('offsets').top);

But I dont found a solution yet. Have any suggestions?

ccjjmartin’s picture

Title: Windows internet explorer body padding too large » Body padding too large
FileSize
80.88 KB

Unfortunately, it looks like this occurs while rotating an iPad too. So far I have been able to reproduce this in Windows 7 and IE11 and on a simulator for an iPad 2 after rotating the device from landscape to portrait (NOTE: you must be scrolled down on a long page and then scroll back up)

ccjjmartin’s picture

droplet’s picture

Component: javascript » toolbar.module
Status: Needs work » Active
Issue tags: +JavaScript
pashupathi nath gajawada’s picture

Assigned: Unassigned » pashupathi nath gajawada

Im looking into it.

droplet’s picture

Also, it seems you using other modules or hacked the Drupal Core. the toolbar isn't sticky on top in my testing

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

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now 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.

vivek.addweb’s picture

You can solve this issue by using CSS:

Try below CSS code

body {
  top: 0;
  margin-top: 0;
  padding-top: 0;
}

Note: Replace selector if gap appear in other div.

Hope this helps you.

ccjjmartin’s picture

Issue summary: View changes
ccjjmartin’s picture

Title: Body padding too large » Body padding too large (Win7 and iPad)
Issue tags: +Novice

I confirmed this is still an issue in the latest 8.2.x branch in the affected environments (Win7 and iPad). To address #7 my version of core is very vanilla other than having the devel module installed and services.yml with twig debug set to true neither of which should be causing this. I agree with Chernous_dn in #2 as to what the problem is.

Since it appears we have narrowed this down to an expected line of code causing the issue I am going to mark this as novice. We should probably update our testing to use the latest 8.3.x branch though.

protitude’s picture

Assigned: pashupathi nath gajawada » Unassigned
Issue tags: +Dublin2016

I'll take a look at this at DrupalCon Dublin 2016. Unassigned as it's been assigned for 2 months.

protitude’s picture

I've been able to replicate this issue in the MacOS simulator using 'Ipad Air 2' and I'm still struggling to find a good solution. This indeed happens when the padding is set via javascript. I tried to create a div and set the height instead, but this issue is continuing to happen. I think it may be related to how javascript is rendering in this browser. Perhaps a different way to calculate the height than is currently being used?

Going to stop working on this for now.

snte’s picture

Title: Body padding too large (Win7 and iPad) » Body padding too large, displace calculation inconsistent (IE10, IE11, and iPad2)
Assigned: Unassigned » snte
FileSize
661.49 KB
256.17 KB

I can confirm this behaviour on IE10 and IE11 on Windows 7 to 8.1 (tested on Browserstack).

The values calculated for this.model.get('offsets').top in core\modules\toolbar\js\views\BodyVisualView.js are not consistent for e.g. Chrome and the above mentioned Browsers.

The calculation of this value is done in core\misc\displace.js in function getRawOffset(el, edge) (Line 159). The final value is built from placement (not consistent, see attached screenshots) and $el.outerHeight() (consistent).

Since placement is somehow wrong built by IE11 (and maybe iPad2?), these line(s) in displace.js (near line 159) should be where to look for:

// Get the offset of the element itself.
var placement = $el.offset()[horizontal ? 'left' : 'top'];
// Subtract scroll distance from placement to get the distance
// to the edge of the viewport.
placement -= window['scroll' + (horizontal ? 'X' : 'Y')] || document.documentElement['scroll' + (horizontal) ? 'Left' : 'Top'] || 0;

According to developer.mozilla.org window.scrollY is not supported in IE (except Edge):

For cross-browser compatibility, use window.pageYOffset instead of window.scrollY. Additionally, older versions of Internet Explorer (< 9) do not support either property ...

(a work around is provided on that page).

I will try to create a patch for this.

snte’s picture

Status: Active » Needs review
FileSize
775 bytes

Patch with window.pageYOffset instead of window.scrollY (window.pageXOffset instead window.scrollX respectively). Tested in IE, could not test iPad.

snte’s picture

Component: toolbar.module » javascript

Since it is in core/misc/displace.js setting Component to javascript.

joelpittet’s picture

Assigned: snte » Unassigned
Status: Needs review » Reviewed & tested by the community

I was able to reproduce the bug on IE9 on Windows 7 in a VM with simplytest.me. The header had to be in the fixed position to reproduce the issue. I tested in chrome 53 and firefox 49 to see if there were any adverse side-effects and there doesn't seem to be any.

Great work all!

joelpittet’s picture

It's not possible for this to be tested automatically due to the specific browsers on this issue.

kristofferwiklund’s picture

snte’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
775 bytes

Thanks for the review and the hint at the related issue! I suggest to combine both, this should be safe and more compatible, since window.pageYOffset has wider browser support than window.scrollY and element.scrollTop. And fixing the tenary wrapping as done in the related issue is still a good idea.

This should fix this for IE, but maybe someone can test on (real) iPad?

droplet’s picture

I believe we didn't need the fallback since we remove the IE8 and below in D8.

https://github.com/jquery/jquery/blob/master/src/offset.js#L77

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.