Overlay height breaks when skip-link (Skip to main content) is clicked for short pages [#1037826]

This issue first came while I was trying to enable a permission for anonymous user for xml sitemap module.. in this link.. "/#overlay=admin/people/permissions/1%23module-user"
The height of the overlay container breaks and at the bottom of the page it shows the normal page area....
I have attached the screenshots of the issue...
I checked other administration pages but could not find this issue any where else other than for permission page redirected from modules, module page...
Theme I am using is Bartik theme....

Comment	File	Size	Author
#4	screenshot3.png	61.06 KB	dejavu_007
#2	normal.png	31.38 KB	dejavu_007
#2	issue.png	31.17 KB	dejavu_007
	Durpal7_2.png	68.07 KB	dejavu_007
	Drupal7.png	72.27 KB	dejavu_007

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

droplet CreditAttribution: droplet commented 24 January 2011 at 11:37

what's your browser & try to disable devel themer

Comment #2

dejavu_007 CreditAttribution: dejavu_007 commented 25 January 2011 at 07:40

File	Size
issue.png	31.17 KB
normal.png	31.38 KB

i use firefox 3.6.3.. but the issue is there for all browsers. And i also tried disabling devel modules but still the issue exist. The second screenshot above shows after disabling devel module.
It seems the issue is only for bartik theme... Garland theme and other themes works fine.. The style for 'body' tag in div#overlay container acts strange for that page.... normally the padding is 20px 0, margin-top 65px but for that page the margin top is 130px.
And the scroll of the browser looks like it has shifted up . (see screenshots below).
It looks like as if there is a negative margin-top for div#overlay-container. but i could'nt find any.

Comment #3

dejavu_007 CreditAttribution: dejavu_007 commented 25 January 2011 at 08:22

Well I think I found what is causing this issue...
In bartik theme css/style.css

 line no. 1590
.overlay #skip-link,
.overlay .region-page-top,
.overlay #header,
.overlay #page-title,
.overlay #featured,
.overlay #sidebar-first,
.overlay #triptych-wrapper,
.overlay #footer-wrapper {
  display: none;
}

removing the line '.overlay #skip-link' seems to work fine..

Comment #4

dejavu_007 CreditAttribution: dejavu_007 commented 25 January 2011 at 11:05

File	Size
screenshot3.png	61.06 KB

There is still this issue with overlay in this page "http://www.example.com/#overlay=admin" when a skip-link (Skip to main content) is clicked. Clicking on skip-link shifts the page to main content, but the page cannot be scrolled after that. The scroll bar is also not visible.
It is there for all themes...

Comment #5

jensimmons CreditAttribution: jensimmons commented 25 January 2011 at 15:26

Component:

theme system

» overlay.module

Marking this component: overlay module. Seems like it affects all themes.

Comment #6

dejavu_007 CreditAttribution: dejavu_007 commented 27 January 2011 at 07:49

Thanks jensimmons.
The problem occurs only for short overlay pages which fits in browser window (no scroll bar present)
In modules/overlay/overlay-parent.css line 9 for element "#overlay-container, .overlay-modal-background, .overlay-element" changing 'postion: absolute;' to 'position: fixed;' seems to fix this.
I wonder if this might cause any other issues...

Comment #7

casey CreditAttribution: casey commented 27 January 2011 at 13:27

We just changed to position:absolute: #878020: position:fixed prevents iOS devices from scrolling the Overlay

I didn't remember why we used position:fixed :) I don't have time but maybe you can find another solution?

Comment #8

dejavu_007 CreditAttribution: dejavu_007 commented 31 January 2011 at 07:11

Title:	Overlay height issue... height breaks	» Overlay height breaks when skip-link (Skip to main content) is clicked for short pages
Assigned:	dejavu_007	» Unassigned

Changing title.. "Overlay height issue... height breaks" to "Overlay height breaks when skip-link (Skip to main content) is clicked for short pages"

Comment #9

dejavu_007 CreditAttribution: dejavu_007 commented 1 February 2011 at 05:27

Thanks casey.
I am just a beginner, so i'm not able to find out any better solution than using position:fixed. In the issue #878020: position:fixed prevents iOS devices from scrolling the Overlay "comment #12" has a patch which puts position:absolute for only iOS devices using js. Can that be applied, leaving other browsers with position:fixed.