Rise-Vision/widget-web-page — pull request #5 by stulees (2014-05-22 19:28:16+00:00)
Title: Review for fix on Bug Issue #3

@donnapep @dlugo00 @ByronDarlison

Issue - http://goo.gl/qqc4HV.
Manage Test - http://rdn-test.appspot.com/#PRESENTATION_MANAGE/id=d9798969-5a7f-4a21-b0ed-ffcd41d05a9a/company=b428b4e8-c8b9-41d5-8a10-b4193c789443
Preview Test - http://viewer-test.appspot.com/Viewer.html?type=presentation&id=d9798969-5a7f-4a21-b0ed-ffcd41d05a9a&showui=false

(I am pointing to my own bucket on S3 as to not disturb QA with their testing. When you approve I will move the necessary files to the proper test bucket)

I need to provide a more lengthy technical explanation for you to fully understand the issue and the fix I am proposing. Bare with me on how exhausting the explanation is:

**Responsive**
One of the widgets requirement is to have the iFrame responsive. The best and most recognized method of making embedded content like an iFrame responsive is with the intrinsic apsect ratio technique (http://goo.gl/KYyo3e, http://goo.gl/cJSGL4). This is what I have done and it works great. A particular part of that approach is to have the iFrame elements width and height set to 100% each. This is important to note as it affects the Problem and Solution part that this bug pertains to.

**Why QA logged the bug**
This other requirement was of scaling(zooming) iframe content which is an easy CSS implementation. However, when scaling more than 100%, it resulted in not being able to scroll the iframe content anymore because I have been solely relying on the iframe content web pages scrollbars and the page has been scaled up so you can't see them anymore. Hence QA logging a bug.

**Partial Fix**
A solution I have done is instead of setting overflow:hidden on the wrapping div of the iframe element, I am setting overflow:auto. This ensures when the iframe element has been scaled more than 1 it will provide scrollbars to scroll the overflowing content. Trouble is, the only amount of overflowing content is based on the iframes height of initially being 100% of its containing div. Thus, the scrollHeight is not the same scrollHeight of the actual content of the iframe web page. This results in double scrollbars. Scrollbars from the wrapping div and scrollbars of the actual content of the iframe web page. It allows a user to now navigate all the content but at the ugly cost of double scroll bars.

**Problem**
If I could set an explicit height on the iframe element then there would be no need for using the iframe content webpage scrollbars and we could rely on the wrapping div scrollbars. The trouble is, **browser security prevents from obtaining the page height or scroll height value of cross domain iframe content by not allowing access to the document element.** There is a solution to this via HTML5 Post Message but this is not possible for us as we **also have no control over the source of the crossdomain iframe content.**

So, this is as good as it gets if we want this widget to both apply responsive design to the iframe and allow for scaling more than 100%. Apologies for the lengthy read.