fix(core): round thumbnail dimensions to prevent sub-pixel gaps#995
fix(core): round thumbnail dimensions to prevent sub-pixel gaps#995
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (5)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (4)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (6)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
There was a problem hiding this comment.
Pull request overview
Adjusts thumbnail sizing in ThumbnailCore.resize() to avoid sub-pixel container dimensions that can render as visible “white lines” around/inside the clipped thumbnail container.
Changes:
- Round down computed
containerWidthandcontainerHeightviaMath.floor(...)inThumbnailCore.resize().
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
This PR aims to eliminate sub-pixel thumbnail container sizing that can produce visible 1px “white line” artifacts by rounding the computed container dimensions down to whole pixels.
Changes:
- Round
containerWidthandcontainerHeightdown usingMath.floor()inThumbnailCore.resize()to avoid fractional pixel container sizes.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
sampotts
force-pushed
the
fix/thumbnail-dimensions
branch
from
6cf8b6d to
f5530d6
Compare
sampotts
changed the title
sampotts
force-pushed
the
fix/thumbnail-dimensions
branch
from
f5530d6 to
3f4d449
Compare
sampotts
changed the title
There was a problem hiding this comment.
Pull request overview
This PR addresses a UI rendering artifact where fractional-pixel thumbnail container dimensions can produce thin white lines (notably in Chrome), by rounding computed container dimensions down to integer pixels.
Changes:
- Add a helper to floor scaled container dimensions (with a small epsilon to avoid floating-point noise).
- Apply the rounding helper to
containerWidth/containerHeightinThumbnailCore.resize(). - Add unit tests covering fractional container sizes, scale-up rounding behavior, and float-noise handling.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/core/src/core/ui/thumbnail/thumbnail-core.ts | Floors scaled container dimensions to integers to prevent fractional-pixel border artifacts. |
| packages/core/src/core/ui/thumbnail/tests/thumbnail-core.test.ts | Adds tests validating the new rounding behavior in several scenarios. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
|
I'll need to validate a few things work as expected on my end with scaling. Can you provide the thumbnail source so I can test? |
Sure, you can use the sandbox since I've setup the storyboards there. Here's how it is currently (check it out on Chrome or something Chromium based to see the bug): and with the fix: Feel free to close this PR and do it another way, we just shouldn't be setting fractional pixel dimensions. |
mihar-22
force-pushed
the
fix/thumbnail-dimensions
branch
from
3f4d449 to
b93fae4
Compare
mihar-22
changed the title
Closes #996
Summary
Round thumbnail dimensions to integers in
ThumbnailCore.resize()to prevent sub-pixel rendering gaps in Chrome.Changes
containerWidth,containerHeight,imageWidth,imageHeight,offsetX,offsetY) withMath.round()inThumbnailCore.resize()Implementation details
ThumbnailCore.resize()multiplies tile dimensions by a float scale factor (e.g.tileHeight * scale). These fractional pixel values get written directly to the DOM as inline styles. When Chrome renders an element at a fractional pixel boundary (e.g.110.625px), it anti-aliases the edge, producing a visible light line at the bottom of the thumbnail.The default skin already has
overflow: clipon.media-preview__thumbnail, but that only clips overflowing content — it doesn't fix the anti-aliased edge of the element's own box at a sub-pixel boundary.Rounding at the source fixes all skins and consumers in one place. The ±0.5px difference is visually imperceptible while eliminating the rendering artifact.
Testing
pnpm -F @videojs/core test src/core/ui/thumbnail/tests/thumbnail-core.test.ts