Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

DigitPopIn: finished characters keep blur(0)/transform and render soft in WebKit

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#62 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Lỗi nằm ở animation-fill-mode: both trên .digit-pop-in__digit trong stylesheet của package, vì vậy hãy bắt đầu từ đó và đổi thành backwards. Tái hiện trên WebKit bằng cách kiểm tra filter và transform đã tính toán của một chữ số sau khi animation kết thúc. Hoàn thành khi các giá trị đó là none và so sánh pixel với văn bản không animation bằng không, như bảng trong issue đã ghi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Problem

DigitPopIn (and so StatCard's value) leaves some characters blurred after the pop-in finishes in WebKit (Safari, and WKWebView apps such as the Backend.AI GO desktop app on macOS): for example the "K" of "7.0K" or the "s" of "7.2s" stays softer than its neighbours.

Cause

.digit-pop-in__digit runs digit-pop-in ... both. With animation-fill-mode: both, every finished character keeps the end keyframe's values: filter: blur() (computed blur(0px)) and transform: translateY(0) (a matrix). WebKit draws an element that keeps a filter as its own composited layer, and those characters render softer than plain text.

Measured in Playwright WebKit with the package stylesheet (0.1.0-alpha.23), 2.5s after load:

fill mode computed filter / transform after the animation pixel difference from the same text without animation
both (current) blur(0px) / matrix(1, 0, 0, 1, 0, 0) 61,471
backwards none / none 0

Proposal

Use animation-fill-mode: backwards for .digit-pop-in__digit (for example animation: digit-pop-in var(--digit-pop-in-duration) var(--digit-pop-in-ease) backwards).

backwards still applies the first keyframe through each character's stagger delay, so nothing flashes before its turn. The end keyframe equals the resting style (opacity: 1, no filter, no transform), so the result looks the same and leaves no animated values behind.

The end keyframe's filter: blur() could also be written blur(0) or none for clarity, but with backwards it no longer persists either way.

Backend.AI GO carries an app-side override until a release includes this: lablup/backend.ai-go#5616.

Ngôn ngữ chính
TypeScript
Star
2
Fork
0
Merge trung bình
1 ngày 14 giờ
Pull request đã merge (30 ngày)
36

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của lablup/ui-common

Tất cả issue của lablup/ui-common

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.