Open Bug 487860 Opened 15 years ago Updated 2 years ago

Overflow and page height do not shrink after ajax compacts page elements leaving too much space after elements

Categories

(Core :: Layout, defect)

defect

Tracking

()

People

(Reporter: mahdi.tehrani, Unassigned)

References

()

Details

(Keywords: regression, testcase-wanted)

Attachments

(2 files)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Overflow and page height do not shrink after ajax compacts page elements leaving too much space after elements. There is a tabbed module on the page (and throughout the site) that has numerous images loading at first in the HTML, but then ajax compacts the modules and hides the images, but leaves a lot of space at the bottom.

Large amounts of time has been taken to look into this but now viable solution has been found.

Thank you very much.

Reproducible: Always

Steps to Reproduce:
1. Go to http://www.bengals.com/ or http://www.bengals.com/media-lounge/index.html and see other pages with the tabbed modules containing images.
2. Scroll down and find a module containing tabs
3. scroll further down to note the large amounts of space before the bottom of the page.
Actual Results:  
You will see on these pages the large black space below the content but above the page footer.

Expected Results:  
There should be no significant space between the page content and page footer as seen in FF3.

Thank you very much. As we create more team sites we would like to see this issue disappear.
@reporter: Could you please try to create a reduced testcase? See https://developer.mozilla.org/en/Reducing_testcases for more information.

The website's height doesn't reduce itself after it has finished loading. However, after selecting the ads on the bottom of the page, the second last footer section jumps up. leaving a gap between that section and the bottommoste footer.
-> Layout for more triage.
Component: General → Layout
OS: Windows XP → All
Product: Firefox → Core
QA Contact: general → layout
Hardware: x86 → All
Version: unspecified → Trunk
This is a regression from bug 300030.
Keywords: regression
Keywords: testcase-wanted
In response to the request for a reduced testcase, I think you asked for a particular page instead of a domain. http://www.bengals.com/index.html or http://www.bengals.com/media-lounge/index.html are two specific pages with the issue.

I am having this same issue on another site that does not have ads at the bottom of the page. http://www.chargers.com/media-vault/index.html

I'm trying to make the connection between this issue and bug #300030 that was mentioned but I am not seeing it.

Thank you for taking a look and I'm all ears if yo have any suggestions.
(In reply to comment #3)
> In response to the request for a reduced testcase, I think you asked for a
> particular page instead of a domain. http://www.bengals.com/index.html or
> http://www.bengals.com/media-lounge/index.html are two specific pages with the
> issue.

Not exactly. :) Look, these websites are really big and full of code that's not necessary to make the bug appear.
I think you are the author of that website? You could copy the page http://www.bengals.com/media-lounge/index.html to http://www.bengals.com/media-lounge/index2.html and there you remove as much code as possible, so in the end, there'll only be the code that's necessary to make the bug appear.

This would really help to fix this bug as soon as possible.

> I'm trying to make the connection between this issue and bug #300030 that was
> mentioned but I am not seeing it.

This bug appeared when bug 300030 was fixed.
Thank you, Daniel. Now I get it and it makes total sense. Sadly I'm not able to do too much because of the backend CMS system that creates the page. 
The best I could do is this:
http://www.bengals.com/integration-test/mahdi/index.html

I wanted to delete that whole header section but I noticed if I firebug delete all the content <div> elements above the "tabbed module" then the problem goes away. This made me think that there was something wrong with the code, however it didn't matter what element I deleted, if there was something above the tabbed module, then the page would not shrink up after loading (or switching back and forth between the tabs). Once everything was deleted (all in firebug) then the tabbed module worked and the page would expand and shrink as expected.
(In reply to comment #5)
> Thank you, Daniel. Now I get it and it makes total sense. Sadly I'm not able
> to do too much because of the backend CMS system that creates the page. 
> The best I could do is this:
> http://www.bengals.com/integration-test/mahdi/index.html

Good work so far.

Whether the code is produced by an CMS or by hand is not important. Important is the final source code, that arrives the browser. 

Simply visit that page and view its source code (right click and "View Page Source"), copy this code and save it. Preferably in the same directory.
Now you can edit the code directly.

You should also make a copy of the CSS and JS files that are referenced in the code, so you can edit those as well and look whether they influence the website negatively.
Attached file testcase in progress (deleted) —
I don't know what's happening here yet, but have run out of time for digging further into things. For the moment, here's a minimal-except-for-figuring-out-what-jqyery-is-doing testcase.
Thank you all for the help, I'm currently out of time to address the issue until sometime next week. I can not post too many things on the live server as requested but I can try.

Thank you and hopefully I will have time to pick this up next week.
executed TC ID 45 & found to be reproducible, Testcase document 4.2
I can reproduce the attached testcase when opened as an attachment here. However, I can't reproduce if I save it locally.
Status: UNCONFIRMED → NEW
Ever confirmed: true
One thing I noticed with DOM Inspector is that the remote version has a computed height of 1420px, while the local version has one of 900px.
Hi Mahdi,

I have tested this issue with the provided test case on latest Firefox (44.0.2) release and latest Nightly (47.0a1) build but I could not reproduce it. There is no space between the footer and the above elements.

Firefox: 47.0a1, Build ID: 20160216030245
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Firefox: 44.0.2, Build ID: 20160210153822
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0

Can you please test this on the latest Firefox release (44.0.2) or latest Nightly (47.0a1, https://nightly.mozilla.org/) and tell me if this still reproduces for you ? When doing this please use a new fresh Firefox profile, maybe also in safe mode (https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems). 

Thanks,
Cosmin.
Flags: needinfo?(mahdi.tehrani)
Hi,

Considering the fact that I cannot reproduce this and the fact that the reporter did not answered to my request until now, I will mark this as Resolved-Worksforme.
If anyone can still reproduce it, feel free to reopen the issue and provide more information.

Thanks,
Cosmin.
Status: NEW → RESOLVED
Closed: 8 years ago
Flags: needinfo?(mahdi.tehrani)
Resolution: --- → WORKSFORME
The testcase still shows the issue for me once I disable mixed content protection. It's not yet a minimal testcase, relying on two external pieces of JavaScript which are served over http.

If you open the testcase, you will see an orange bar and a cyan bar below each other. Allowing the 3rd party JavaScript to run will set the container of the cyan bar to display: none. Despite this the page continues taking up the space previously reserved for it. Forcing a reflow will finally collapse that space. The bug is that that reflow (?) doesn't happen automatically.
Status: RESOLVED → REOPENED
Resolution: WORKSFORME → ---
Attached file TestCase.zip (deleted) —
Firefox: 45.0.1, Build ID: 20160315153207
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0

Hi,

I saved the test case locally and I was able to reproduce this issue.  
STR:
1. Download the "TestCase.zip".
2. Extract files.
3. Open the test case with Firefox.

Actual results:
You can see the empty space below the orange bar. If the empty space and the scroll bar does not appear refresh the page.
This also reproduces if mixed content protection is disabled like Sander mentioned in previous comment.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: