[Webkit-unassigned] [Bug 243773] New: -webkit-background-size and background-size have different behavior

[bugzilla-daemon at webkit.org]

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

            Bug ID: 243773
           Summary: -webkit-background-size and background-size have
                    different behavior
           Product: WebKit
           Version: Safari 14
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: subsevenx2001+webkit at gmail.com

Created attachment 461524

  --> https://bugs.webkit.org/attachment.cgi?id=461524&action=review

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220810/8877b980/attachment-0001.htm>