Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Content cut off when using margin in styles

See original GitHub issue

Bug description: Basically I receive the html from backend and I need to display inside the app. Once the content creators started to add inline style we noticed that sometimes the content was cut off vertically. I attached a screenshot taken on android. After investigating the problem I found out that this was happening only when we were specifying margins in the styles. Initially the margin of the li tag was specified directly on the tag. To Reproduce:

return (
   <AutoHeightWebView
      source={{ html: wrappedContent, uri }}
      scalesPageToFit={false}
      style={[styles.self, style] as any}
      scrollEnabled={false}
      viewportContent="width=device-width, user-scalable=no"
      onMessage={onMessage}
      customScript={customScript}
      customStyle={ContentStyle}
    />
)

wrappedContent is the output of the following hook

export default (content?: string) =>
  useMemo(
    () =>
      content
        ? `
<!DOCTYPE html />
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    ${content}
  </body>
</html>
  `
        : '',
    [content],
  );

contentStyle is just a constant:

export default `* {
  font-family: 'Titillium Web', sans-serif;
}
body {
  font-size: 16;
}
h1 {
  font-size: 28;
  text-align: center
}
h2 {
  font-size: 22;
  text-align: center;
}
h3 {
  font-size: 20;
  text-align: center;
}
h4 {
  font-size: 18;
  text-align: center;
}
h5 {
  font-size: 16;
  text-align: center;
}
h6 {
  font-size: 18;
  text-align: center;
}
a {
  color: ${Colors.link};
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
}
.lightTitle {
  font-size: 18;
  color: ${Colors.white};
}
.textField {
  font-size: 15;
}
.fieldTitle {
  font-size: 16;
  color: ${Colors.primary[100]};
}
.error {
  font-size: 14;
  color: Colors.error;
}
ul {
  line-height: 1.5em;
}
ol {
  line-height 1.5em;
}
li {
  margin: 1em;
}`;

Source (static HTML or url):

<!DOCTYPE html />
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <ol>
<li>Find a place where you will not be disturbed.</li>
<li>Sit in a comfortable position and relax.</li>
<li>Close your eyes and take eight slow, deep breaths.</li>
<li>When you are ready, play audio.</li>
</ol>
<p>&nbsp;</p>
<p><a><img style="display: block; margin-left: auto; margin-right: auto;" src="https://mynga-bucket.s3.us-east-2.amazonaws.com/assets/Quest_01/ch-dash/beginIcon.png" alt="" width="50%" /></a></p>
<p>&nbsp;</p>
<p style="text-align: center;"><em>After listening - scroll to continue...</em></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Your life might end tragically tomorrow, or quietly after a long life. Near or far, if you never take the time to really examine your life goals, values, strengths, weaknesses, hopes, and fears, you won&rsquo;t have anything to measure your life against. The combination of those things is an approximate answer to the question, &ldquo;<em>Who Am I?&rdquo;</em></p>
<ol>
<li>In your journal, list at the following:</li>
<ul>
<li>What do you regret most? (at least 5)</li>
<li>If you had a second chance, what actions would you take to change your life for the better? (at least 5)</li>
</ul>
<li>If you did that right, it was probably hard.&nbsp; You probably don&rsquo;t feel very happy right now. Let&rsquo;s fix that.&nbsp; Now with your pen and paper list at least 10 more things:</li>
<ul>
<li>What are you most grateful for? (at least 5)</li>
<li>What brings you the most joy in life? (at least 5)</li>
</ul>
</ol>
  </body>
</html>

Expected behavior: Calculate height after the styles have been applied and take into account the applied margin. I ended up specifying a padding rather than a margin. Screenshots/Videos: Screenshot_2020-08-19-17-10-15-242_com what I’m referring to is the last bullet point that is cut off.