Skip to content

LoginScreen form input iOS style inconsistency #4365

@femto-code

Description

@femto-code
  • 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions