search

alphagov / reported-bugs

Tracking bugs in browsers, assistive technologies and operating systems that have been reported by GDS
5 stars 2 forks source link

Inline blocks that contain text with min-width, box-sizing: border-box incorrectly include the border in width calculation (Safari Technology Preview) #67

Closed 36degrees closed 2 years ago

36degrees commented 2 years ago

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=234935 Date: 2022-01-06 Reported by: Oliver Byford Related to: https://github.com/alphagov/govuk-frontend/issues/2493

Given a span that contains a single character, and the following CSS:

span {
  display: inline-block;
  box-sizing: border-box;
  min-width: 50px;
  min-height: 50px;
  border: 10px solid;
}

Expected result: The box should be 50px wide and 50px high. Actual result: The box is 70px wide (because it includes the border width, as if using box-sizing: content-box) and 50px high.

If the box does not contain any text, the width is calculated correctly.

CodePen: https://codepen.io/36degrees/pen/GRMBpQE

Bisected using bisect-builds -s 285788 -e 287707 --sanity-check

Works: r286120 Fails: r286121 https://trac.webkit.org/r286121