Break-inside mixin (css3/columns) has incorrect output #1561

Closed
cimmanon opened this Issue Feb 13, 2014 · 1 comment

3 participants

@cimmanon

In 1.0.0.alpha.18, the break-inside property is emitted twice.

.foo {
    /* columns */
    @include columns(30em);
    /* break-inside */
    @include break-inside(avoid);
}

Output:

.foo {
  /* columns */
  -moz-columns: 30em;
  -webkit-columns: 30em;
  columns: 30em;
  /* break-inside */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

It is also worth noting that the moz prefix is omitted. However, moz browsers don't support the break-inside property as per the specification. Instead, they use the page-break-inside property.

http://codepen.io/cimmanon/pen/CcGlE

@cimmanon cimmanon added a commit that referenced this issue Feb 14, 2014
@cimmanon cimmanon Fixed column-break mixin to emit moz prefix using the moz non-standar…
…d property name (addresses #1561)
d7463b1
@chriseppstein chriseppstein added this to the 1.0.0 milestone Mar 8, 2014
@cfree

As @cimmanon mentioned in his first comment, the -moz-break-inside/break-inside properties are not supported in Firefox, though neither is -moz-page-break-inside as included in PR #1566. It is ignored in Firefox (tested in 36.0.1), however page-break-inside works as expected when using the column-break(inside, avoid) or break-inside(avoid) mixins. This is only the case for Firefox; the -webkit-column-break-inside and break-inside works fine in Safari, Chrome, and IE10/11 respectively).

Googling -moz-page-break-inside returns no results, so I'm unable to reference when/if this was ever the correct syntax. Can anyone else replicate this?

http://codepen.io/cfree/pen/LEgygr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment