RE: css3 background

Francis Boumphrey:
> Various browsers use various paradigms for transitions between
> border-styles in rounded-borders - particularly with dashed and
> dotted. The correct form shold be spelt out.

The rendering requirements for conformance of styles is very broad.  Observe the descriptions:
http://www.w3.org/TR/css3-background/#the-border-style


Speaking for IE ...

IE9 retains historical behavior of making the dashed corner joins aesthetically appealing when possible, carrying that over to the new rounded scenarios.  Dashed lengths are twice the width.  Space between dashes is generally equal to the border width rather than double it.  I say generally because that space is expanded slightly when there's extra slack that isn't large enough to allow an additional dash to be added.  In contrast, the example rendering in Figure 5 shows a double-width spacing alternative and doesn't "make the corners look good" which I think is significantly less visual appealing.

IE's dotted rendering always produces circles -- not ellipses, not rectangles, not heart shapes in the corners.  When positioning dots, the spacing of same-sized dots starts the same as the diameter of the dots and is grown to distribute the dots within the available space; spacing between dots is consistent between dots along a non-rounded sides and rounded sides for consistent thickness borders.  IE9 attempts to place corner dots first and position middle dots second; similar to the dashed respect for corner aesthetics.  IE9 introduces two-tone dots in some non-rounded and rounded scenarios, but intentionally avoids split-colored dots when it would produce distortion or other undesirable effects.  To my knowledge, IE remains the only browser that places dots along the curve of a rounded border (introduced in IE9 Preview 1 in March 2010).  Further, attention was paid during IE9 development to producing renderings for mixed thickness rounded borders with dotted style; in such cases the placement and spacing between dots is more complicated.

Note that for dotted style, dashed style, and rounding via border-radius, IE9 has special behavior for small thicknesses (1px) and small radii (< 3px or so) that relax some of the requirements (such as dash corner placements) in the interest of significant performance gains.

While we're on the topic, IE9 branched from prior releases in another way:  Inset and Outset renderings were changed to align better with the sample renderings in the specification.  Previously they looked more like Groove and Ridge.  While this change wasn't strictly required for conformance (to my knowledge), we felt it was the right choice for IE9+ document modes.


There are some improvements in IE10 for rendering quality in some extreme edge cases as well as some performance improvements, but fundamentally the algorithm is the same as in IE9.




Getting back to your original question...

Before transition consistency even becomes possible the idle state rendering would need to be made much more consistent across browsers.

Nonetheless, can you elaborate on what specific aspect(s) of transitions relative to border styles you find particularly troubling?  Maybe a narrow portion of the overall problem can be solved easily and could address those concerns.

Received on Wednesday, 19 October 2011 19:12:46 UTC