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

iOS: loginScreen form input outline style inconsistency

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

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
68/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
css, javascript
Lĩnh vực
frontend, mobile

Hướng nghiên cứu

Tìm các style chứa .item-input-outline.item-content .item-floating-label và các selector nền của màn hình đăng nhập. Tái hiện sự cố trong kiểu iOS ở chế độ sáng với các ô nhập liệu có viền và nhãn nổi, sau đó xác minh rằng nền của nhãn khớp với nền của màn hình đăng nhập mà không thay đổi hành vi bình thường của nền trang.

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

Mô tả

  • Framework7 version: 9.0.2
  • Platform and Target: Chrome Browser, PWA/WebApp in iOS style mode
Describe the bug

On login screens, when using form inputs with floating labels and outline style, the floating labels are displayed with a mismatched background color. BUT: this only applies to iOS style in light mode.

To Reproduce

Steps to reproduce the behavior:

  1. Create a login screen
  2. Create form inputs with floating labels (and outline style)
  3. Turn on iOS style
  4. See mismatched floating label background colors
Expected behavior

I expect the floating label to have the same background color as the page, which in this case, is the login screen, so white instead of #efeff4.

Actual Behavior

The background color of the floating label is mismatched as described above.

Screenshots
Image
Additional context

I checked the underlying CSS rules and found the cause:

.item-input-outline.item-content .item-floating-label {
    background: var(--f7-page-bg-color); /* #efeff4 */
}

I checked the variable and --f7-page-bg-color resolves to #efeff4 in light mode while the following rule sets the login screen background color to #fff:

.login-screen-content, .login-screen-page, .login-screen .page {
    background: var(--f7-login-screen-content-bg-color); /* #fff */
}

That rule defines the login screen background as white (as opposed to a normal page's background color), leading to the mismatch in the floating label CSS rule. This does not happen with MD theme.

Ngôn ngữ chính
JavaScript
Star
18.8k
Fork
3.2k
Không có pull request nào được merge trong 30 ngày

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 framework7io/framework7

Tất cả issue của framework7io/framework7

Issue tương tự

Thêm issue về JavaScript

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.