autoprefixer: width/height `stretch` prefixes missing `-webkit-` version

According to caniuse, Safari should get a -webkit-stretch version of stretch width/height rule

…however this doesn’t appear to be the case with the current demo at https://autoprefixer.github.io/, using the “last 10 years” config:

Input

/* pre-prefixed */
.stretch {
  width: -webkit-fill-available;
  width: -webkit-stretch;
  width: -moz-available;
  width: stretch;
}

/* non-prefixed */
.stretch {
  width: stretch;
}

Output

/* pre-prefixed */
.stretch {
  width: -webkit-fill-available;
  width: -webkit-stretch;
  width: -moz-available;
  width: stretch;
}

/* non-prefixed */
.stretch {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (11 by maintainers)

Commits related to this issue

Correct `width: stretch` data for Safari See this discussion for details: https://github.com/postcss/autoprefixer/issues/1294 — committed to simevidas/browser-compat-data by simevidas 4 years ago

Most upvoted comments

@lunelson Not out of date but incorrect. The -webkit-fill-available value predates Chrome’s engine fork. When this value was implemented, Chrome was still using WebKit, Safari’s current engine.

Also, the stretch value was only introduced in 2017 (https://github.com/w3c/csswg-drafts/commit/c372e95e1438308623941bb28ef0f5e7e31dffb3). If Apple added -webkit-stretch as an alias for -webkit-fill-available, they would have to have done it fairly recently.

simevidas on Apr 6, 2020

…so this shows that the caniuse data is out of date

https://github.com/mdn/browser-compat-data/pull/5955

are we sure that no version of Safari has ever used the -webkit-stretch prefix?

I checked the history of https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/CSSValueKeywords.in to no avail. It didn’t exist as far as I can tell.

tomayac on Apr 6, 2020

BTW, I like the design of your website

ai on Mar 24, 2020

@simevidas my use-case had to do with ensuring that block items with negative horizontal margins (left, right or both) would expand to the full possible width (which strangely does not happen in all browsers under all conditions). Previously I had done it with explicit widths (.foo), but stretch does not require knowing the other values (.bar):

.foo, .bar {
  margin: 0 -2rem;
}
.foo {
  width: calc(100% + 4rem);
}
.bar {
  width: stretch;
}

The width: stretch value seems to be…completely unspecified. Maybe Autoprefixer should not support such features until they are ready to use.

I’ll defer to you and @ai on supporting unspecified features; but this one was specified and then removed, thus at least in this case “unspecified” is not strictly the same as “ready to use”. This feature works in the majority of browsers, if prefixed, and I have used it successfully.

lunelson on Apr 1, 2020