Autoprefixer: Autoprefixer removing certain prefixes.

[Vidhya-Dilip]

Autoprefixer is removing ' -webkit-box-orient: vertical' css property while on production.

What I use:

.limit-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

What is seen on production:

.limit-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

This causes issue in UI.
I'm using autoprefixer with Vue 2.5.2.

[ai]

Use:

  /* autoprefixer ignore next */
  -webkit-box-orient: vertical;

Does this code works in Firefox and other non-webkit browsers?

[mgol]

@ai Firefox has implemented webkit-line-clamp in v68 (currently in beta). To use it, you have to set -webkit-box-orient: vertical as well so it is supported, Firefox supports the webkit prefix as well: https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

[mgol]

See the news with more details here: https://webplatform.news/issues/2019-05-17

[shivam2407]

Use:

  /* autoprefixer ignore next */
  -webkit-box-orient: vertical;

Does this code works in Firefox and other non-webkit browsers?

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

Above code worked for me.

[ai]

Fixed 69ed8a0

[ai]

Released in 9.6.1.