Bug 215131

Summary: Issue getting iframe height through jQuery
Product: WebKit Reporter: devin <dc97080>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: isa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 13   
Hardware: Mac   
OS: macOS 10.15   

Description devin 2020-08-04 10:36:44 PDT
Hi,

I am having an issue with getting the height of an iframe's body element through jQuery. It works in Chromium based browsers as intended, but it returns 0 as the height (in bdyheight). I was asked by a Safari developer to post this here. If there is a workaround that is known, please let me know!

Here's the code:

<iframe id="dbframe" src="https://transitiontn.org/assessment-database-vr/" width="100%" scrolling="no" >
 
<script>
  jQuery("#dbframe").on("load", function() {
  let head = jQuery(this).contents().find("head");
  let css = '<style>#top-header, #main-header, #main-footer{display: none;}#page-container{padding-top: 0!important;}               </style>';
  jQuery(head).append(css);
  let bdyheight = jQuery(this).contents().find("body").height();
  jQuery(this).height(bdyheight);
 
  let dblinks = jQuery(this).contents().find("td a");
  jQuery(dblinks).click(function() {
    jQuery("html").animate({scrollTop: 0 }, 800);
    window.setTimeout(function(){jQuery("#dbframe").height(2000)}, 2000);   
  });  
  }); 
</script>

Thank you!
Comment 1 Radar WebKit Bug Importer 2020-08-11 10:37:20 PDT
<rdar://problem/66848144>
Comment 2 Simon Fraser (smfr) 2020-08-11 10:46:03 PDT
Could you post a link to a self-contained example please?
Comment 3 devin 2020-08-11 10:51:16 PDT
(In reply to Simon Fraser (smfr) from comment #2)
> Could you post a link to a self-contained example please?

This is the page we are trying to get working.
https://transitiontn.org/vr/assessment-db/
Comment 4 Simon Fraser (smfr) 2020-08-11 11:01:48 PDT
Here's one issue, possibly unrelated:
[Warning] [blocked] The page at https://transitiontn.org/vr/assessment-db/ was not allowed to run insecure content from http://transitiontn.org/wp-content/themes/Divi-child/js/jquery.sticky.js.
Comment 5 Simon Fraser (smfr) 2020-08-11 11:07:28 PDT
For some reason the display type of the <body> in the iframe ends up as "inline".
Comment 6 devin 2020-08-12 11:10:35 PDT
(In reply to Simon Fraser (smfr) from comment #4)
> Here's one issue, possibly unrelated:
> [Warning] [blocked] The page at https://transitiontn.org/vr/assessment-db/
> was not allowed to run insecure content from
> http://transitiontn.org/wp-content/themes/Divi-child/js/jquery.sticky.js.

That issue has been fixed, but it appears to have had no effect.
Comment 7 isa hv 2021-03-02 15:33:24 PST
Adding this bug as it may be of the same origin: https://bugs.webkit.org/show_bug.cgi?id=222622