title: WKWebView UITableView Cell Height and Instagram Embed Code
body: <p>I'm trying to add Instagram posts to cells in a table view, but I can't get the cell height calculation right despite trying a bunch of different things. I'm creating a <code>WKWebView</code> for each cell and using <code>loadHTMLString</code> with the embed code supplied by Instagram, with one slight modification to Instagram's HTML which is this:</p>
  
  <pre><code>`&lt;head&gt;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;&lt;/head&gt;`
  </code></pre>
  
  <p>When I run it in the simulator, the Instagram post appears to be the right size for about half a second, then it gets resized. </p>
  
  <p>Below is some basic code that demonstrates the problem when run, with a single hardcoded Instagram post displayed in two different cells for example purposes. If I use <code>loadRequest</code> and a <code>NSURLRequest</code> with a random website instead of <code>loadHTMLString</code> the cells are sized fine and it all works as expected. How can I use Instagram embed codes in UITableViewCells in a way that the entire post is shown?</p>
  
  <p><strong>InstagramViewController.h</strong></p>
  
  <pre><code>#import &lt;UIKit/UIKit.h&gt;
  #import &lt;WebKit/WebKit.h&gt;
  
  @interface InstagramViewController : UIViewController &lt;WKNavigationDelegate, WKUIDelegate, UITableViewDelegate, UITableViewDataSource&gt;
  @property (strong, nonatomic) IBOutlet WKWebView *webView;
  @property (strong, nonatomic) IBOutlet UITableView *tableView;
  
  @end
  </code></pre>
  
  <p><strong>InstagramViewController.m</strong></p>
  
  <pre><code>#import "InstagramViewController.h"
  
  @interface InstagramViewController ()
  @property (nonatomic) BOOL loaded;
  @property (nonatomic) CGFloat cellHeight;
  
  @end
  
  @implementation InstagramViewController
  
  - (void)viewDidLoad {
      [super viewDidLoad];
      self.tableView.estimatedRowHeight = 150;
      self.tableView.rowHeight = UITableViewAutomaticDimension;
  }
  
  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
      return 2;
  }
  
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
      static NSString *simpleTableIdentifier = @"simpleTableIdentifier";
      UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
      if (cell == nil) {
          cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
      }
      WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];
      WKWebView *webView = [[WKWebView alloc] initWithFrame:cell.contentView.frame configuration:theConfiguration];
      webView.navigationDelegate = self;
      [webView.scrollView setScrollEnabled:NO];
      webView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
      webView.tag = indexPath.section;
      NSString *instagramEmbedHTML = @"\
      &lt;!DOCTYPE html&gt;\
      &lt;html&gt;\
      &lt;head&gt;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\
      &lt;/head&gt;\
      &lt;body&gt;\
      &lt;blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"&gt;\
      &lt;div style=\"padding:8px;\"&gt;\
      &lt;div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:41.91489361702128% 0; text-align:center; width:100%;\"&gt;\
      &lt;div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"&gt;\
      &lt;/div&gt;\
      &lt;/div&gt;\
      &lt;p style=\" margin:8px 0 0 0; padding:0 4px;\"&gt;\
      &lt;a href=\"https://www.instagram.com/p/BVR2uajF1Qc/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_blank\"&gt;I wish for... free cupcakes!!  First 50 customers at our #Gramercy location get a free #Summer Collection 3-Pack to celebrate 5 beautiful, magical years on 23rd St!  Today only! Open &amp;#39;til 10pm  #happybirthday&lt;/a&gt;\
      &lt;/p&gt;\
      &lt;p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"&gt;A post shared by Baked by Melissa (@bakedbymelissa) on &lt;time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2017-06-13T12:00:48+00:00\"&gt;Jun 13, 2017 at 5:00am PDT&lt;/time&gt;\
      &lt;/p&gt;\
      &lt;/div&gt;\
      &lt;/blockquote&gt;\
      &lt;script async defer src=\"http://platform.instagram.com/en_US/embeds.js\"&gt;&lt;/script&gt;\
      &lt;/body&gt;&lt;/html&gt;";
      [webView loadHTMLString:instagramEmbedHTML baseURL:nil];
      [cell.contentView addSubview:webView];
      return cell;
  }
  
  -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
      return [self calculateHeightForCellAtIndexPath:indexPath];
  }
  
  -(CGFloat)calculateHeightForCellAtIndexPath:(NSIndexPath *)indexP{
      while (!_loaded) {
          [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];
      }
      NSLog(@"new cell height: %f", _cellHeight);
      return _cellHeight;
  }
  
  - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
      NSLog(@"I finished");
      [webView evaluateJavaScript:@"document.body.scrollHeight;" completionHandler:^(NSString *result, NSError *error) {
          if (error != NULL) {
              NSLog(@"Error %@",error);
          }
          NSLog(@"new scrollHeight Result %@",result);
          float ht = [result floatValue];
          NSIndexPath* indexOfCell = [NSIndexPath indexPathForRow:0 inSection:webView.tag];
          UITableViewCell* cell = [self.tableView cellForRowAtIndexPath:indexOfCell];
          cell.frame = CGRectMake(0, 0, cell.frame.size.width, ht);
          _cellHeight = ht;
          self.loaded = YES;
      }];
  }
  
  - (void)didReceiveMemoryWarning {
      [super didReceiveMemoryWarning];
  }
  @end
  </code></pre>
  
  <p>Here's a screenshot of the output I get when I run the above code in which you can see the size of the embed exceeds the size of the calculated cell height, cutting off the entire comment section in this case:</p>
  
  <p><a href="https://i.stack.imgur.com/pA22z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pA22z.png" alt="The author&#39;s text for each Instagram post is cut off because of the sizing issue"></a></p>