Bug 14054 – REGRESSION: cupid.com uses iframe.document to make content visible

• Component: Evangelism
• Status: RESOLVED FIXED

[David Kilzer (:ddkilzer)]

* SUMMARY
Some pages on cupid.com (which was recently redesigned) uses the iframe.document property to resize iframe elements to make content visible.

* STEPS TO REPRODUCE
1. Open Safari/WebKit.
2. Go to URL:  http://www.cupid.com/membership.aspx?pagename=A1&pagemode=output

* EXPECTED RESULTS
The full content of the page should be visible.

* ACTUAL RESULTS
The content in the center of the page is cut off.

* REGRESSION
This is a regression from shipping Safari 2.0.4 (419.3) on Mac OS X 10.4.9 (8P135) which works when loading the page.  A local debug build of WebKit r22080 reproduces the bug.

* NOTES
I'm assuming this will be an evangelism bug since the iframe.document property is unsupported.

The calcHeight() function on that page clearly needs to be updated to work with a nightly WebKit.

The iframe.document property was removed in r21651 for <rdar://problem/5215830>.

http://trac.webkit.org/projects/webkit/changeset/21651

[David Kilzer (:ddkilzer)]

Note that this doesn't work on Opera 9.10, either.

[David Kilzer (:ddkilzer)]

JavaScript console error:

Undefined value
http://www.cupid.com/membership.aspx?pagename=A1&pagemode=output
Line: 21

[David Kilzer (:ddkilzer)]

I just sent a note to cupid.com customer support regarding this issue.

[Jen]

Hi,
I'm a developer for Cupid.com, and I have started to work on this issue. I tried using the "ownerDocument" property, but the page heights still aren't calculating correctly. They keep getting longer and longer as I click on different pages, no matter what height they're supposed to be. The same code in Opera 9.10 works better; but sometimes it cuts off the very bottom of long pages. Would it be possible for you to look at my code and see if I'm doing anything wrong here; I'm not very familiar with Macs and doing a Google search on this topic didn't help me much. Here is the block of code that I added for the WebKit and Opera browsers:
if (userAgent.indexOf('applewebkit/522+') != -1 || userAgent.indexOf('opera/9.10') != -1) 
{
   var the_height= document.getElementById     ("iframe").ownerDocument.body.offsetHeight;
   //change the height of the iframe
   document.getElementById("iframe").height = (the_height);
   document.getElementById("mainBody").height = (the_height + 50);
}	

Thanks,
-Jen

[David Kilzer (:ddkilzer)]

(In reply to comment #4)
> if (userAgent.indexOf('applewebkit/522+') != -1 ||
> userAgent.indexOf('opera/9.10') != -1) 

Please consider using "object detection" instead of user agent sniffing here:

if (document.getElementById("iframe").ownerDocument)

For more info about this technique see:

http://developer.apple.com/internet/webcontent/objectdetection.html

> {
>    var the_height= document.getElementById("iframe").ownerDocument.body.offsetHeight;
>    //change the height of the iframe
>    document.getElementById("iframe").height = (the_height);
>    document.getElementById("mainBody").height = (the_height + 50);
> }       

I think you may want to use ".style.height" instead of simply ".height" here.  Does that make any difference in rendering?

[Jen]

I changed the code to use "object detection" and ".style.height", and our development site now works with Safari/WebKit. We will launch the changes to production within the next few weeks.

I still couldn't get our site to work with Opera, however. I'll continue looking into that.

Thanks for your help,
-Jen

[David Kilzer (:ddkilzer)]

(In reply to comment #6)
> I still couldn't get our site to work with Opera, however. I'll continue
> looking into that.

Please contact David Storey <[e-mail]> for further assistance with Opera.

Glad we could help!

[Sam Weinig]

The site has been fixed.