Making child div appear causes parent div's height to decrease in Safari only

Question

I have a text input nested in a parent div. When you type in the text input, a "delete text" button appears. When the "delete text" button appears, it causes its parent div "headerSearch" to decrease in height from 71px to 70px in Safari only.

When the "delete text" button is hidden again, the parent div "headerSearch" has it's height go back from 70px to 71px.

Why does displaying the "delete text" button cause the parent div "headerSearch" to change its height in Safari, and how do I prevent it?

Try the code snippet below using Safari where I reproduced the problem.

function deleteSearchBarContents() {
  document.getElementById('searchBox').value = "";
  document.getElementById("searchBox").focus();
  document.getElementById("deleteSearchBarContentsButton").style.display = "none";
}

document.getElementById("deleteSearchBarContentsButton").addEventListener("click", deleteSearchBarContents);


function showDeleteSearchBarContentsButton() {
  // If value is not empty
  if (document.getElementById("searchBox").value.trim() == "") {
    // Hide the element
    document.getElementById("deleteSearchBarContentsButton").style.display = "none";
  } else {
    // Otherwise show it
    document.getElementById("deleteSearchBarContentsButton").style.display = "inline-block";
  }
}
document.getElementById("searchBox").addEventListener("keyup", showDeleteSearchBarContentsButton);

.wrapperSearch {
  max-width: 100%;
  overflow: hidden;
  min-height: 1111px;
  margin: 0 auto;
  position: relative;
}

.headerSearch {
  background: #3f3f3f;
  position: relative;
  display: inline-block;
  width: 100%;
}

.entireSearchContainer {
  margin-left: 29.034px;
}

.entireSearchContainer .searchBar {
  display: inline-block;
  width: 400px;
  margin-top: 22.82px;
  height: 46.978px;
  background-color: #fff;
}

.entireSearchContainer .searchBar .searchBarInner {
  display: inline-flex;
  display: -webkit-inline-flex;
  width: 100%;
  height: 47px;
}

.entireSearchContainer .searchBar .searchBox {
  flex: 1;
  border: none;
  background-color: transparent;
  padding: 17.944px;
  font-size: 16px;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
}

.deleteSearchBarContentsButton {
  display: none;
  border: none;
  background-color: transparent;
  height: 46.978px;
  border-radius: 2.618px;
  margin-top: 0;
  justify-content: center;
  outline: 0!important;
  cursor: pointer;
  display: inline;
  color: #252525!important;
  display: none;
  padding-right: 0;
  width: 17.944px;
  margin-left: 11.09px;
  color: #888;
  margin-right: 0;
  overflow: hidden;
}

.entireSearchContainer .searchBar .searchButton {
  border: none;
  background-color: transparent;
  height: 46.978px;
  border-radius: 2.618px;
  margin-top: 0;
  width: 46.978px;
  padding-right: 17.944px;
  justify-content: center;
  outline: 0!important;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}

.searchButton img {
  width: 16px;
  height: 16px;
  vertical-align: middle!important;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.deleteSearchBarContentsButton {
  display: none;
  padding-right: 0!important;
  width: 17.944px!important;
  margin-left: 11.09px!important;
}

.deleteSearchBarContentsButton img {
  width: 11px!important;
  height: 11px!important;
  vertical-align: middle!important;
}

<div class="wrapperSearch">
  <div class="headerSearch">
    <div class="entireSearchContainer" id="entireSearchContainer">
      <form id="searchForm" name="test" action="https://example.com/" method="GET">
        <div class="searchBar" id="searchBar">
          <div class="searchBarInner">
            <input class="searchBox" id="searchBox">
            <button class="deleteSearchBarContentsButton" id="deleteSearchBarContentsButton" type="button"><img src="https://th.bing.com/th/id/R.f8232e70a6e015e91560068ebde56fb4?rik=LZu9qZIqj6SnLw&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_376399.png&ehk=mpYEtMisrcWebqodks%2fXno%2fbN9QmLfHuo7tMTVFKGnE%3d&risl=&pid=ImgRaw&r=0"></button>
            <button class="searchButton" type="submit" value="Search"><img src="https://th.bing.com/th/id/OIP.-9A-FOvJIk9-zy2b0vofXAHaHX?pid=ImgDet&rs=1"></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

.entireSearchContainer .searchBar {
  display: block;
}

I'm embarrassed this is the solution. Safari didn't like it when the "searchBar" was display: inline-block; even though other browsers it was fine.