Skip to content
This repository has been archived by the owner on Jan 12, 2023. It is now read-only.

CSS support differs from regular Firefox Android? #4252

Closed
polarathene opened this issue Apr 21, 2019 · 3 comments
Closed

CSS support differs from regular Firefox Android? #4252

polarathene opened this issue Apr 21, 2019 · 3 comments
Labels
wontfix

Comments

@polarathene
Copy link

Steps to reproduce

background-color: aliceblue;

@supports (min-height:-moz-available) {
    background-color: seagreen;
}

I'm using a CSS-in-JS library that prefixes at run-time client-side. Unfortunately using this prefix with height properties in Firefox has been a bug for 9 years (with recent version 66 making a slight improvement, but this particular value/prefix still is bugged).

As a result, to workaround the prefixing, I have used the feature query as shown above. This works in Firefox on the desktop and android apps, allowing me to enforce the fallback value(100vh for min-height). However Firefox Focus appears to ignore it, the background-color does not change.

Expected behavior

background-color should change to seagreen, or at least the CSS above should match what other Firefox apps are doing.

Actual behavior

Feature query is ignored, background-color remains aliceblue.

Device information

  • Android device: Huawei Mate 10 Pro(Model BLA-L29), Android 9, EMUI 9.0.0
  • Focus version: 8.0.8

caniuse.com does not list a separate target for Firefox Focus. If the CSS differs from the Android app, could you please point me to a reference where I can see the support/differences? MDN does not differentiate Focus as different either.
@polarathene polarathene mentioned this issue Apr 21, 2019
Merged
@polarathene
Copy link
Author

polarathene commented Apr 21, 2019 •
edited
Loading

I'm using this for implementing a sticky footer. html selector has height: 100%; and my container div within the body element has content(main) and a footer:

display: flex;
flex-direction: column;
min-height: 100vh; /* fallback */
min-height: stretch; /* aka fill, aka fill-available */

/* Firefox prefix does not work with height properties, force fallback */
@supports (min-height:-moz-available) {
  min-height: 100vh;
}

> main {
    flex: 1;
}

> footer {
    flex-shrink: 0;
}

I've noticed that if I remove other min-height properties and the feature query, so that it's just min-height: 100vh;. Firefox renders as expected, the footer is not clipped(requiring scrolling down), but both Chrome and Firefox Focus are clipping the footer. Chrome can avoid this with min-height: stretch;, which afaik Firefox Focus does not support.

EDIT: Turns out Firefox Focus is using -webkit-fill-available (triggered via feature query). Either way, I wasn't able to get behaviour similar to Chrome or Firefox.

I tried the following which normally is rendered like a desktop site with very small text:

<!doctype html>
<html>
<head>
<title>Basic webpage</title>
</head>
<body>
This is a basic webpage.
</body>
</html>

This didn't render like Chrome and Firefox but instead as if the markup was setup to cater for mobile by default:

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<title>Basic webpage</title>
</head>
<body>
This is a basic webpage.
</body>
</html>

The options have a "Request Desktop Site" but with either markup I'm not seeing a difference. So that may very well be another bug I should raise an issue for? Both markups add additional scrolling height to account for the URL bar, while regular Firefox on android and Chrome do not.

@HM100
Copy link

HM100 commented Apr 24, 2019

I'm using this for implementing a sticky footer. html selector has height: 100%; and my container div within the body element has content(main) and a footer:
display: flex;
flex-direction: column;
min-height: 100vh; /* fallback /
min-height: stretch; / aka fill, aka fill-available */

/* Firefox prefix does not work with height properties, force fallback */
@supports (min-height:-moz-available) {
min-height: 100vh;
}

main {
flex: 1;
}

footer {
flex-shrink: 0;
}
I've noticed that if I remove other min-height properties and the feature query, so that it's just min-height: 100vh;. Firefox renders as expected, the footer is not clipped(requiring scrolling down), but both Chrome and Firefox Focus are clipping the footer. Chrome can avoid this with min-height: stretch;, which afaik Firefox Focus does not support.

EDIT: Turns out Firefox Focus is using -webkit-fill-available (triggered via feature query). Either way, I wasn't able to get behaviour similar to Chrome or Firefox.
I tried the following which normally is rendered like a desktop site with very small text:
<!doctype html>

<title>Basic webpage</title> This is a basic webpage. This didn't render like Chrome and Firefox but instead as if the markup was setup to cater for mobile by default: <title>Basic webpage</title> This is a basic webpage. The options have a "Request Desktop Site" but with either markup I'm not seeing a difference. So that may very well be another bug I should raise an issue for? Both markups add additional scrolling height to account for the URL bar, while regular Firefox on android and Chrome do not.

Please give a screenshot about that. Focus on iOS indeed is without gecko. Please give one that it is from Android. Make a testcase, make sure you only detect -webkit-fill-available and when it is detected add some styles to the body or make a container that will contain these ones.

@stale
Copy link

stale bot commented Apr 15, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Apr 15, 2022
@stale stale bot closed this as completed Apr 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
wontfix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@polarathene @HM100