What type of issue is this?
Incorrect support data (example: BrowserX says "86" but support was added in "40")
What information was incorrect, unhelpful, or incomplete?
Hi there!
I noticed that the vendor prefix for the stretch property on Firefox is incorrectly documented within the BCD. From what I saw, it marks the stretch property as not supported on Firefox. This however only applies to the normal stretch value & -webkit-fill-available webkit prefix, not -moz-available. Using the mozilla prefix (-moz-available), the property works for all variants.
This applies to the following properties from what I saw with the stretch value:
- css.properties.width
- css.properties.min-width
- css.properties.max-width
- css.properties.height
- css.properties.min-height
- css.properties.max-height
What browsers does this problem apply to, if applicable?
Firefox
What did you expect to see?
I expected the above mentioned properties to include the status supported for firefox, under a specific vendor prefix -moz-available.
Did you test this? If so, how?
From these screenshots it is shown that the moz-available prefix always works for min/max-width, where as it is currently marked as unsupported. For the width/height properties, it is currently marked as supported through a vendor prefix, which would be more consistent to document as -moz-available instead of -webkit-fill-available.
Firefox Developer edition 151
Firefox 150
Chromium 144
The page to reproduce this layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stretch width/height css support firefox</title>
<style>
.recognized {
color: green;
}
.recognized::after {
content: ' (recognized)';
}
.not-recognized {
color: red;
}
.not-recognized::after {
content: ' (not recognized)';
}
</style>
</head>
<body>
<h1>Stretch width/height css support</h1>
<p> <code>CSS.supports()</code> is used to check for vendor support</p>
<ul id="results"></ul>
<script>
const checks = {
width: ['stretch', '-webkit-fill-available', '-moz-available'],
'min-width': ['stretch', '-webkit-fill-available', '-moz-available'],
'max-width': ['stretch', '-webkit-fill-available', '-moz-available'],
height: ['stretch', '-webkit-fill-available', '-moz-available'],
'min-height': ['stretch', '-webkit-fill-available', '-moz-available'],
'max-height': ['stretch', '-webkit-fill-available', '-moz-available']
};
const list = document.querySelector('#results');
Object.entries(checks).forEach(([property, values]) => {
list.appendChild(document.createElement('hr'));
values.forEach((value) => {
const item = document.createElement('li');
item.textContent = `${property}: ${value};`;
item.className = CSS.supports(property, value) ? 'recognized' : 'not-recognized';
list.appendChild(item);
});
});
</script>
</body>
</html> Can you link to any release notes, bugs, pull requests, or MDN pages related to this?
https://bugzilla.mozilla.org/show_bug.cgi?id=1789477 - My only concern is that because this user story hasn't been completed yet (at which point I assume the vendor prefix would be removed) - does this warrant an change in in the BCD data, or should this instead be kept marked as unsupported till Firefox fully supports this value?
Do you have anything more you want to share?
I've discovered this issue due to esbuild, where <0.25.5 would not add autoprefixes for the stretch property. On version 0.25.5, this was added correctly for the width property (oddly enough min/max is incorrect here). With the latest version however, the -moz-available prefixes were removed which I can only assume is because it seems to follow the BCD data, which documents it differently from what I see in the browser. What I thought is once the BCD reports it correctly, I can create an issue with esbuild to let them know this property now has new supported browsers/vendor prefixes.
My question is as I'm not really familiar with how this whole system works, was this intended or incorrectly documented in the BCD? Hopefully I have provided enough information, let me know if I'm missing anything.
Thank you in advance!
MDN URL
No response
MDN metadata
No response
What type of issue is this?
Incorrect support data (example: BrowserX says "86" but support was added in "40")
What information was incorrect, unhelpful, or incomplete?
Hi there!
I noticed that the vendor prefix for the stretch property on Firefox is incorrectly documented within the BCD. From what I saw, it marks the stretch property as not supported on Firefox. This however only applies to the normal
stretchvalue &-webkit-fill-availablewebkit prefix, not-moz-available. Using the mozilla prefix (-moz-available), the property works for all variants.This applies to the following properties from what I saw with the
stretchvalue:What browsers does this problem apply to, if applicable?
Firefox
What did you expect to see?
I expected the above mentioned properties to include the status supported for firefox, under a specific vendor prefix
-moz-available.Did you test this? If so, how?
From these screenshots it is shown that the
moz-availableprefix always works for min/max-width, where as it is currently marked as unsupported. For the width/height properties, it is currently marked as supported through a vendor prefix, which would be more consistent to document as-moz-availableinstead of-webkit-fill-available.Firefox Developer edition 151
Firefox 150
Chromium 144
The page to reproduce this layout:
https://bugzilla.mozilla.org/show_bug.cgi?id=1789477 - My only concern is that because this user story hasn't been completed yet (at which point I assume the vendor prefix would be removed) - does this warrant an change in in the BCD data, or should this instead be kept marked as unsupported till Firefox fully supports this value?
Do you have anything more you want to share?
I've discovered this issue due to esbuild, where <0.25.5 would not add autoprefixes for the stretch property. On version 0.25.5, this was added correctly for the width property (oddly enough min/max is incorrect here). With the latest version however, the
-moz-availableprefixes were removed which I can only assume is because it seems to follow the BCD data, which documents it differently from what I see in the browser. What I thought is once the BCD reports it correctly, I can create an issue with esbuild to let them know this property now has new supported browsers/vendor prefixes.My question is as I'm not really familiar with how this whole system works, was this intended or incorrectly documented in the BCD? Hopefully I have provided enough information, let me know if I'm missing anything.
Thank you in advance!
MDN URL
No response
MDN metadata
No response