question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Regression: -webkit-box-orient rules removed

See original GitHub issue

While upgrading my dependencies on a project with some pretty old css (and which includes some webkit-specific hacks), I noticed an issue. Autoprefixer version 6.7.0 now entirely removes “-webkit-box-orient” rules. Version 6.6.1 did not have this issue.

.foo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
}

->

.foo {
  display: -webkit-box;
  -webkit-box-align: stretch;
}

Here’s the code I’ve tested with:

require('postcss')([require('postcss-cssnext')({browsers: 'chrome >= 42, safari >= 8'})]).process('.foo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; }').css

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:25
  • Comments:45 (19 by maintainers)

github_iconTop GitHub Comments

200reactions
Lars-Webercommented, Apr 27, 2017

Possibly helpful for anyone reading up on this thread and problem, least intrusive option to prevent the removal of the line in question is to just disable the autoprefixer for this line/section

    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
36reactions
kmvancommented, May 27, 2018

@ai

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

It works, thank you very much.

Read more comments on GitHub >

github_iconTop Results From Across the Web

webkit-box-orient: vertical; in sass is not compiled in gulp
The style -webkit-box-orient: vertical; is missing in css file. My gulp task for sass compilation is gulp.task('styles', function() { return ...
Read more >
box-orient - CSS: Cascading Style Sheets - MDN Web Docs
The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.
Read more >
Fwd: Use -webkit-flex instead of -webkit-box (in the Chrome UI ...
Hi, I'm currently trying to eliminate all uses of -webkit-box in favor of the newer, cross-browser and not deprecated -webkit-flex.
Read more >
Safari Technology Preview Release Notes - Apple Developer
Changed to align with CSS Fonts specification changes (r283130); Fixed shadowing of @font-palette-values rules (r283756); Handle CSSOM style mutation of font- ...
Read more >
Timeline – WebKit
Removed extraneous JSC_FAST_CALL on definitions of inline functions. ... Reviewed by Eric Seidel. -webkit-box-orient:horizontal doesn't work on <button> tag
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found