WebKit is false positive on "space" and "round"

[impressivewebs]

For the values "space" and "round" for background-repeat, WebKit triggers a false positive. You can see this demonstrated in this old JSBin:

http://jsbin.com/uzesun/3/edit

Notice the message displayed in the red box. If you view it in any version of Chrome or Safari (maybe not Safari 6?), you'll see the message "This browsers supports space and round" but, as shown by the fact that the background images aren't displayed properly, those browsers don't support space and round.

Compare to Opera and IE10, which display the same message, and they both display the background properly. Firefox doesn't support space and round, but it has the correct message.

I've filed bug reports with WebKit (a year ago) as well as Chrome but no one seems to be following up on those. I've also tested on Chrome Canary, with the same results.

[dstorey]

One option would be to create a black list like HTML5Test uses, so that a browser gets put in the dog house for that feature until they really do support it.

[LeaVerou]

That would mean we'd need to do browser detection though, which is super messy… Is there a library we can use?

[dstorey]

I guess none are perfect, but most of the ones available should detect the major browser correctly (at least if up to date after a new browser like Edge, or Opera with Blink, or Chrome come out once in a blue moon. Just don't use any by Google as they always break with new Edge versions :p).

HTML5Test uses one by the same author and it seems to keep up to date, but it is in PHP so a no go for this site https://github.com/WhichBrowser/Parser

There is Bowser by Dustin Diaz. https://github.com/ded/bowser We fixed it to support Edge, but it may not support more obscure browsers (there is a bug open for Amazon Silk for example)