Bug 243773

Summary:

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

Product:

WebKit

Reporter:

Michael Leu <subsevenx2001+webkit>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 11

See Also:

https://bugs.webkit.org/show_bug.cgi?id=170834

Attachments:

Description	Flags
Comparison between different scenario	none
simplified test case	none

Description Michael Leu 2022-08-10 02:11:30 PDT

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>

Comment 1 Alexey Proskuryakov 2022-08-10 17:08:30 PDT

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".

Comment 2 Karl Dubost 2022-08-15 16:19:05 PDT

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

Comment 3 Karl Dubost 2022-08-15 16:20:28 PDT

And yes this is basically a duplicate of bug 170834

Comment 4 Radar WebKit Bug Importer 2022-08-15 16:21:19 PDT

<rdar://problem/98693366>

Comment 5 Ahmad Saleem 2023-03-09 05:16:31 PST

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!