Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

iOS: loginScreen form input outline style inconsistency

Aperta Adatta ai principianti
#4,365 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
css, javascript
Ambito
frontend, mobile

Direzione di ricerca

Cerca gli stili che contengono .item-input-outline.item-content .item-floating-label e i selettori dello sfondo della schermata di accesso. Riproduci il problema nello stile iOS in modalità chiara con campi di input con contorno ed etichetta fluttuante, quindi verifica che lo sfondo dell’etichetta corrisponda a quello della schermata di accesso senza modificare il comportamento normale dello sfondo della pagina.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

  • 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.

Lingua principale
JavaScript
Stelle
18.8k
Fork
3.2k
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di framework7io/framework7

Tutte le issue di framework7io/framework7

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.