- From: Rik Cabanier <cabanier@gmail.com>
- Date: Fri, 20 Jun 2014 09:42:42 -0700
- To: Alan Gresley <alan@css-class.com>
- Cc: www-style list <www-style@w3.org>, "public-fx@w3.org" <public-fx@w3.org>
- Message-ID: <CAGN7qDA+7zL43+Z1jj-3JJbr+zh4UF4LnMS1vLdp8cFMivkPqQ@mail.gmail.com>
On Thu, Jun 19, 2014 at 11:29 PM, Alan Gresley <alan@css-class.com> wrote: > On 20/06/2014 12:40 PM, Rik Cabanier wrote: > >> All, >> >> the background-blend-mode [1] property recently landed in Firefox and >> Chrome and we noticed that a very common design is to use it to create >> patterns with gradients. [2] >> >> The spec states: >> >> Each background layer must blend with the element’s background layer that >> is below it and the element’s background color. Background layers must not >> blend with the content that is behind the element, instead they must act >> as >> if they are rendered into an isolated group. >> >> >> This works for most elements except for the root element which has a >> different paint order [3]: >> > > It's not a different painting order but different painting method. > > > The background of the root element becomes the background of the canvas >> and >> covers the entire canvas, anchored (for 'background-position') at the same >> point as it would be if it was painted only for the root element itself. >> The root element does not paint this background again. >> > > Note that the root element may not be <html> but something like <svg> or > possibly <any-name-element> if using XML. This is why the spec mentions > root element here since CSS can style different web languages. > > > All browsers implement painting of the root backdrop by drawing the >> background color and images on top of a 100% opaque white backdrop. >> > > This is not quite true. In the Firefox setting for 'Content > Colors', IE > setting 'Appearance > Colors' and Opera setting for 'Preferences > > Webpages', I can change the background/backdrop of the root element to at > least a minimum of 70 colors. Internally, each UA has a hidden element > wrapping the root element. For old Opera (not sure about Blink), this was a > black backdrop. This is unspecified behavior. Prior to blending, this did not make a difference but now we need to know that there could be another color 'layer' for the root element. > Because of this, background images that would blend with transparency >> (which doesn't change the color), now blend with white and display >> differently. >> > > Agree. An image with semi-transparent red rgba(255,0,0,0.5), the blended > color would paint an opaque 'salmon'. If a user had white text and black > background/backdrop for accessibly reasons, the blended color would paint > opaque 'maroon'. Yes, or if you use any color with 'screen', the content completely disappears. > My question is, should we keep it as specified and make a note in the spec >> that the root element behaves differently, or should we fix the >> implementation so background images blend on a transparent backdrop >> followed by matting and clarify the paint order in css colors? >> >> I think authors would prefer the latter but they can work around it if >> needed. >> > > For accessibly reasons, background images should blend on a transparent > backdrop. I agree that authors would prefer that the blending happens in a transparent group. I'm unsure what that has to do with accessibility though. Can you explain?
Received on Friday, 20 June 2014 16:43:13 UTC