0

After last Chrome update to version 83.0.4103.116 I see some changes in my design. Some graphics items does not fit precisely as before update +/- 1px. Now I found another strange behaviour of the height of parent DIV in case font size of child div is changing. See example:

.conceptBox ul,
.conceptBox ul>li {
  margin: 0px;
  padding: 0px;
  list-style: none url();
}

.conceptBox ul>li {
  border: 1px solid rgb(120, 120, 120);
}

.conceptBox ul>li .concept {
  font-size: 10px;
  /* White border depends on font-size, no border bor 16px */
  border-left: 5px solid #f2a5c1;
}

.conceptBox ul>li .concept div {
  border: 1px solid red;
}
<div class="conceptBox">
  <ul>
    <li>
      <div class="concept">
        <div>Team building 2020</div>
      </div>
    </li>
    <li>
      <div class="concept">
        <div>Workshop RBG</div>
      </div>
    </li>
  </ul>
</div>

After the update the Chrome generates an additional 'border-top'. After inspection it has no border, just the height increased. If the font-size is bigger then this additional border disappear. I do not remember such a behaviour in Chrome before update.

Donald Duck
  • 8,409
  • 22
  • 75
  • 99
Lodhart
  • 205
  • 1
  • 6
  • 14
  • 1
    it is not really clear what your question is. Are you asking if there is a workaround? Are you asking if it is a known issue or bug? Are you asking if other people have found the same thing? – stackuser83 Jun 30 '20 at 14:27
  • You should consider using a normalize or reset CSS lib to overcome browser specific issues: https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css – β.εηοιτ.βε Jun 30 '20 at 19:11
  • I had no idea about this. For this new Chrome update they add a new style for the inputs (checkbox, input, ...) so it was clear that it must be because of this. Because of some 'build-in' CSS Chrome styles. I was just not sure if it is some possible bug or feature. Thanks. – Lodhart Jul 01 '20 at 16:45

0 Answers0