Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix ensureMinFontSizeComputed calculation if <body> is a flex container #18416

Merged
merged 1 commit into from
Jul 10, 2024
Merged

Fix ensureMinFontSizeComputed calculation if <body> is a flex container #18416

merged 1 commit into from
Jul 10, 2024

Conversation

razh
Copy link
Contributor

@razh razh commented Jul 10, 2024

Given:

html,
body {
  height: 100%;
}

body {
  display: flex;
}

The <div> appended to the <body> will take up the full height of the
viewport due to the implicit align-items: stretch of flex containers.

This results in an incorrect computed minFontSize value.

Reproduction

I isolated the calculation to demonstrate the issue:

function calculateMinFontSize() {
  const div = document.createElement("div");
  div.style.opacity = 0;
  div.style.lineHeight = 1;
  div.style.fontSize = "1px";
  div.textContent = "X";
  document.body.append(div);
  const height = div.getBoundingClientRect().height;
  div.remove();

  document.body.textContent = height + "px";
}

calculateMinFontSize();
window.addEventListener("resize", calculateMinFontSize);

https://codepen.io/razh/pen/OJePRMd/c9d3a97fb8c2f7df89f193808a3f3a02?editors=1111

This can also be reproduced at:

https://mozilla.github.io/pdf.js/web/viewer.html

By applying display: flex to the <body> tag (opacity: 0 removed from .textLayer for visibility):

Without display: flex With display: flex
CleanShot 2024-07-10 at 03 03 35@2x (Before) CleanShot 2024-07-10 at 03 03 26@2x (After)

@razh
Fix ensureMinFontSizeComputed calculation if <body> is a flex con…
665fff0 
…tainer

Given:

```css
html,
body {
  height: 100%;
}

body {
  display: flex;
}
```

The `<div>` appended to the `<body>` will take up the full height of the
viewport due to the implicit `align-items: stretch` of flex containers.

This results in an incorrect computed `minFontSize` value.
@razh razh force-pushed the ensureMinimumFontSize-body-flex branch from fb5cf42 to 665fff0 Compare July 10, 2024 12:41
@timvandermeij
Copy link
Contributor

/botio-linux preview

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)

Received

Command cmd_preview from @timvandermeij received. Current queue size: 0

Live output at: http://54.241.84.105:8877/c41f81797120f25/output.txt

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/c41f81797120f25/output.txt

Total script time: 1.04 mins

Published

@timvandermeij
Copy link
Contributor

/botio test

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)

Received

Command cmd_test from @timvandermeij received. Current queue size: 0

Live output at: http://54.241.84.105:8877/2d6153d0b67d090/output.txt

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Windows)

Received

Command cmd_test from @timvandermeij received. Current queue size: 0

Live output at: http://54.193.163.58:8877/da0d69ac89a229d/output.txt

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Linux m4)

Failed

Full output at http://54.241.84.105:8877/2d6153d0b67d090/output.txt

Total script time: 29.68 mins

  • Unit tests: Passed
  • Integration Tests: Passed
  • Regression tests: FAILED
  different ref/snapshot: 19
  different first/second rendering: 3

Image differences available at: http://54.241.84.105:8877/2d6153d0b67d090/reftest-analyzer.html#web=eq.log

@moz-tools-bot
Copy link
Collaborator

From: Bot.io (Windows)

Failed

Full output at http://54.193.163.58:8877/da0d69ac89a229d/output.txt

Total script time: 43.91 mins

  • Unit tests: Passed
  • Integration Tests: Passed
  • Regression tests: FAILED
  different ref/snapshot: 2

Image differences available at: http://54.193.163.58:8877/da0d69ac89a229d/reftest-analyzer.html#web=eq.log

@timvandermeij timvandermeij merged commit cf58113 into mozilla:master Jul 10, 2024
9 checks passed
@timvandermeij
Copy link
Contributor

Thank you for your contribution!

@npanchal108 npanchal108 mentioned this pull request Aug 31, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nicolo-ribaudo nicolo-ribaudo nicolo-ribaudo approved these changes

@timvandermeij timvandermeij timvandermeij approved these changes

Assignees
No one assigned
Labels
text-selection
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@razh @timvandermeij @moz-tools-bot @nicolo-ribaudo