Browser font change event detection - hidden frame - mutation observer

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>MutationObserver and Hidden Frame</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
    <script>
      $(function() {
        // this does not work since resize event is fired only for window object
        $("#bluebox").bind('resize', function() {
          console.log('resized..');
        });
        
        var fsize = 1;
        $("body").click(function() {
          fsize += 0.1;
          if (fsize > 1.3) {
            fsize = 1;
          }
          $("#bluebox").css("font-size", fsize+"em");
        });
        
        var target = document.getElementById('bluebox');
        
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutationRecord) {
            console.log('style changed!', mutationRecord.attributeName, mutationRecord.type);
            
            var style = window.getComputedStyle(target);
            console.log("new height: ", style.getPropertyValue("height"));
          });    
        });

        observer.observe(target, { attributes : true, attributeFilter : ['style'] });
      });
    </script>
    
    <script>
      function onHiddenFrameResized() {
        console.log("FrameResized..........");
      }
    </script>
  </head>

  <body style="font-size:1rem">
    <!--<iframe src="fcontent.html"></iframe>-->
    <iframe src="javascript:(function() { console.log('setting up hidden frame resize event hook (to detect browser font sizing event)'); return '<script>window.onresize=function() { try { parent.onHiddenFrameResized(); } catch(error) { console.log(error); }} </script>hidden frame'; })()" style="width:10rem; height: 5em"></iframe>
    <p>hidden frame gets resize event when browser font size changes. the first event comes in at app load.</p>
    
    <div id="bluebox" style="width: 10em; height: 5em; background-color: blue"></div>
    <p>bluebox changes as browser font size changes but event is not notified. MutationObserver notifes the change in other instances (try clicking anywhere in the page to see the demo).</p>
  </body>

</html>

// Add your javascript here
$(function(){
  $("h1").animate({
    "margin-left": "100px"
  }, "slow");
});

/* Put your css in here */

h1 {
  color: red;
}

<p>fcontent</p>
      <div id="redbox" style="width: 18px; height: 4px; background-color: red"></div>
      hello
      <script>
        window.onload = function() {
          console.log("iframe window loaded!!")
          window.onresize = function() {
            console.log("iframe window resized!!")
          };
        };
      </script>