Bug 218300

Summary:

Incorrect percent transform-origin when browser is zoomed

Product:

WebKit

Reporter:

Zach Bjornson <zbbjornson>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

ahmad.saleem792, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

Unspecified

OS:

Unspecified

See Also:

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

Attachments:

Description	Flags
Screenshot in Safari 13.1.2	none

Description Zach Bjornson 2020-10-28 11:37:17 PDT

Created attachment 412552 [details]
Screenshot in Safari 13.1.2

https://jsfiddle.net/uq6dmrt2/1/

HTML:
  <svg width=100 height=100>
    <circle id="c1" />
  </svg>

CSS:
  svg {
    border: 1px solid gray;
  }

  circle {
    cx: 50%;
    cy: 50%;
    r: calc(50% - 4px / 2);
    stroke: darkblue;
    stroke-width: 4px;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    fill: transparent;
  }

When the browser is zoomed (edit menu, not pinch zoom), the transform origin is incorrect and the circle gets truncated.

(Safari 13.1.2)

Comment 1 Radar WebKit Bug Importer 2020-10-28 19:22:53 PDT

<rdar://problem/70791313>

Comment 2 Ahmad Saleem 2024-08-23 17:30:54 PDT

This seems to be fixed with Safari Technology Preview 201.

*** This bug has been marked as a duplicate of bug 194903 ***