1577665 - <bg-size> is allowed after a slash only if <bg-position> is specified in CSS background shorthand

Status: RESOLVED WORKSFORME

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: test, chrome top, firefox bottom

1. Navigate to https://www.t-online.de/nachrichten/ausland/id_86344692/vor-dem-brexit-johnson-will-offenbar-zwangsurlaub-parlament-gegner-sind-sauer.html
   2. Observe Facebook social media icon.

Expected Behavior:
Correct icon is displayed. (Facebook specific icon).

Actual Behavior:
Incorrect icon is displayed (large pink dot).

Note
1. Not reproducible on Chrome 76.0.3809.111.
2. Also reproducible on Fenix 1.3.1 (Build #12341950) 📦: 8.0.0, 78354bc12 🦎: 69.0-20190812090043
3. Also reproducible in RDM.

Affected area:

<a class="Tsocnetfacb" target="_blank" href="https://m.facebook.com/sharer.php?u=https://www.t-online.de/nachrichten/ausland/id_86344692/vor-dem-brexit-johnson-will-offenbar-zwangsurlaub-parlament-gegner-sind-sauer.html" data-gatr="facebook" rel="nofollow noopener">
	<span></span>
</a>

A test case for it
https://codepen.io/webcompat/pen/LYPLvow

A short summary is:

This is working in Chrome and not in Firefox.

background: rgba(0,0,0,0) 0 url(…) / cover

This is working in both browsers

background: rgba(0,0,0,0) 0 url(…);
background-size: cover;

Comment 1

[Karl Dubost💡 :karlcow]

Attachment: test case for cover + background

This is a test case for it.

Comment 2

[Cameron McCormack (:heycam)]

cover is a <bg-size> value, and the background shorthand syntax only allows a / <bg-size> value immediately after a <position>.

Safari has the same behavior as Chrome. Karl, if this is not causing too much breakage, then I think we should write a WPT to cover this case and file bugs on Chrome and WebKit to change. WDYT?

Comment 3

[Karl Dubost💡 :karlcow]

Cameron, yes that's a good idea!

The syntax in the spec to make it a bit clearer.

<bg-layer> =    <bg-image> 
                     || <bg-position> [ / <bg-size> ]? 
                     || <repeat-style> 
                     || <attachment> 
                     || <box> 
                     || <box>

Created an issue for a web platform test on https://github.com/web-platform-tests/wpt/issues/18947
Opened bugs on
https://bugs.chromium.org/p/chromium/issues/detail?id=1002310
and https://bugs.webkit.org/show_bug.cgi?id=201623

Comment 4

[Karl Dubost💡 :karlcow]

I guess we could close it here as worksforme.

Comment 5

[Cameron McCormack (:heycam)]

Thanks, please re-open if the compat becomes more of a problem.