Safari Bug - textarea height of 100% within a fixed-height table cell is not respected

I think I've found a bug in Safari and would like to know if I'm correct. The bug is as follows:

In Safari, if there is a <textarea> within a <td> where the <td> has a defined pixel height and the <textarea> has height: 100%;, the <textarea&>'s height will be the normal height (slightly different depending on whether you're using border-box or content-box sizing) MINUS the top and bottom border and padding of the <textarea>.

This means that in Safari, the <textarea> will NOT stretch to the full height of the <td> when using box-sizing: border-box; (as it correctly does in all other browsers).

Here's some code to demonstrate:

* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
}

.contentbox {
  box-sizing: content-box;
}

table {
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

td {
  width: 150px;
  height: 200px;
  padding: 0px;
  margin: 0px;
}

.messagediv {
  color: purple;
}

.paddingleft {
  padding-left: 15px;
}

.blue {
  background-color: blue;
}

textarea {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0px;
  resize: none;
  min-height: 0px;
}

.margintop {
  margin-top: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us">
  <title>Bug Demo: Safari &lt;textarea&gt; Within &lt;td&gt;</title>
  <script>
  </script>
</head>

<body>
  <h3>Bug Demo: Safari &lt;textarea&gt; Within &lt;td&gt;</h3>
  <table>
    <tr>
      <td class="blue">
        <textarea id="textarea1"></textarea>
      </td>
      <td class="paddingleft">
        <b>&lt;textarea&gt; with box-sizing:border-box;</b><br /><br /> The &lt;textarea&gt; to the left should be exactly 200px in height.<br /><br /> You should not be able to see the blue background behind the &lt;textarea&gt;.
        <div class="messagediv margintop" id="messagediv1"></div>
      </td>
    </tr>
  </table>
  <script>
    document.getElementById("messagediv1").innerHTML = "Height of &lt;textarea&gt; #1 using JavaScript: " + document.getElementById("textarea1").offsetHeight + "px";
  </script>
  <table class="margintop">
    <tr>
      <td class="blue">
        <textarea class="contentbox" id="textarea2"></textarea>
      </td>
      <td class="paddingleft">
        <b>&lt;textarea&gt; with box-sizing:content-box;</b><br /><br /> The &lt;textarea&gt; to the left should be slightly larger than 200px in height.<br /><br /> You should not be able to see the blue background behind the &lt;textarea&gt;.
        <div class="messagediv margintop" id="messagediv2"></div>
      </td>
    </tr>
  </table>
  <script>
    document.getElementById("messagediv2").innerHTML = "Height of &lt;textarea&gt; #2 using JavaScript: " + document.getElementById("textarea2").offsetHeight + "px";
  </script>
</body>

</html>

Solution

Here is a way to fix, I added, this css to style directly to make it easier to read. This is known bug: Make textarea fill table cell

Credit to stefa.rossi

<td class="blue" style="position: relative;">
    <textarea id="textarea1" style="position:absolute; top: 0;
left: 0;
right: 0;
bottom: 0;"></textarea>
</td>

document.getElementById("messagediv1").innerHTML = "Height of &lt;textarea&gt; #1 using JavaScript: " + document.getElementById("textarea1").offsetHeight + "px";
document.getElementById("messagediv2").innerHTML = "Height of &lt;textarea&gt; #2 using JavaScript: " + document.getElementById("textarea2").offsetHeight + "px";

* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
}

.contentbox {
  box-sizing: content-box;
}

table {
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

td {
  width: 150px;
  height: 200px;
  padding: 0px;
  margin: 0px;
}

.messagediv {
  color: purple;
}

.paddingleft {
  padding-left: 15px;
}

.blue {
  background-color: blue;
}

textarea {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0px;
  resize: none;
  min-height: 0px;
}

.margintop {
  margin-top: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us">
  <title>Bug Demo: Safari &lt;textarea&gt; Within &lt;td&gt;</title>
  <script>
  </script>
</head>

<body>
  <h3>Bug Demo: Safari &lt;textarea&gt; Within &lt;td&gt;</h3>
  <table>
    <tr>
      <td class="blue" style="position: relative;">
        <textarea id="textarea1" style="position:absolute; top: 0;
left: 0;
right: 0;
bottom: 0;"></textarea>
      </td>
      <td class="paddingleft">
        <b>&lt;textarea&gt; with box-sizing:border-box;</b><br /><br /> The &lt;textarea&gt; to the left should be exactly 200px in height.<br /><br /> You should not be able to see the blue background behind the &lt;textarea&gt;.
        <div class="messagediv margintop" id="messagediv1"></div>
      </td>
    </tr>
  </table>
  <table class="margintop">
    <tr>
      <td class="blue">
        <textarea class="contentbox" id="textarea2"></textarea>
      </td>
      <td class="paddingleft">
        <b>&lt;textarea&gt; with box-sizing:content-box;</b><br /><br /> The &lt;textarea&gt; to the left should be slightly larger than 200px in height.<br /><br /> You should not be able to see the blue background behind the &lt;textarea&gt;.
        <div class="messagediv margintop" id="messagediv2"></div>
      </td>
    </tr>
  </table>
</body>

</html>