Bug 243773 – "background-size: 12px" works differently than in other browsers

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Michael Leu]

Created attachment 461524 [details]
Comparison between different scenario

Please refer to this JSFiddle demo
https://jsfiddle.net/4ju6xwbk/

Hardware info:
MacBook Pro 13-inch 2020

Browser used:
Safari 14.1.2

Expected behavior:
There should be a row of circles under the 2nd line of "ABCDEFG"

Actual behavior:
Depends on window scaling, the circles are either failed to render or become rectangles

Current workaround:
Change background-size to -webkit-background-size will make it render correctly, but it will be frowned by most linters and they suppose to have same behavior


I attached a screenshot describing the problem.
The left is Safari, the middle is Safari but use -webkit-background-size instead of background-size and the right is Google Chrome, I also tested FireFox and it has same result as Chrome.

Here is HTML source in case JSFiddle demo is gone.

<style>
.outer {
  display: relative;
  background: red;
  
  width: 100%;
  height: 100%;
}

.inner {
  display:absolute;
  content: none;
  left: 0;
  width: 100%;
  bottom: 0px;
  height: 12px;
  background: radial-gradient(rgb(242, 243, 244) 4px, transparent 0%) 0% 0% / 12px;
  background-size: 12px;
}
</style>

<div class="outer">
  ABCDEFG<br>
  ABCDEFG
  <div class="inner"/>
</div>

[Alexey Proskuryakov]

It is intentional that -webkit-background-size and background-size behave differently in Safari in this case. -webkit-background-size differs from background-size only in the interpretation of a single value: '-webkit-background-size: l;' is equivalent to 'background-size: l l;' whereas 'background-size: l;' is equivalent to 'background-size: l auto;'.

But maybe the last aspect doesn't match other browsers and/or the spec? See also bug 170834.

The workaround is specify both values, "background-size: 12px 12px".

[Karl Dubost]

Created attachment 461650 [details]
simplified test case

first of all. The CSS code is not correct.
"display: absolute" does NOT exist.
If it was meant to be position: absolute, then we see the dots at the bottom of the viewport. That said I'm not sure the positions are required. So let's remove them to simplify the test.


As for background-size and as Alexei mentioned:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://drafts.csswg.org/css-backgrounds/#the-background-size

> The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.


Now if I specify "background-size: 12px auto" the 3 rendering engines still displays the test case differently.

there's an issue about the behavior differences in browsers in the compat spec.
https://github.com/whatwg/compat/issues/28

[Karl Dubost]

And yes this is basically a duplicate of bug 170834

[Radar WebKit Bug Importer]

<rdar://problem/98693366>

[Ahmad Saleem]

This seems to work while using attached test cases in STP164 and WebKit ToT (261422@main) and matching Chrome Canary 113 and Firefox Nightly 112.

Can we mark this as "RESOLVED CONFIGURATION CHANGED"? Thanks!