- 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:
- Create a login screen
- Create form inputs with floating labels (and outline style)
- Turn on iOS style
- 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
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.
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:
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
Additional context
I checked the underlying CSS rules and found the cause:
I checked the variable and
--f7-page-bg-colorresolves to#efeff4in light mode while the following rule sets the login screen background color to#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.