fix: Do not use overflowing small <svg> During rewriting FigspecViewer from Lit to DOM (without libraries), I noticed not using overflowing small <svg> fixes long-standing and thought-to-be-hard-to-fix issues at once. Since the fix is easily appliable to the current code base, here it is. The <svg> element works as a layer for guidelines, has had viewBox size of `0 0 5 5` and most of the paint is rendered as overflowing content. The problem is, this is the cause of Safari does not trigger pointer-related actions and Blink renders guidelines at incorrect positions (slightly shifted). * https://github.com/pocka/figspec/issues/37 * https://github.com/pocka/figspec/issues/31 The code is there from the start[^0] and I don't remember why it being this... my guess is limitation of being a nested custom-element and forgot to change on the refactor[^1]. After searching for noticeable differences using `git stash`, the only changes are those bugs fixed. I expected overflow/scroll related issues but no noticeable regression found. [^0]: https://github.com/pocka/figspec/blob/2a57a99908d62f050675d365da74ad9249c281e5/packages/components/src/FigmaViewerGuide/index.ts#L152-L153 [^1]: https://github.com/pocka/figspec/commit/d8991c590cb831a443f2bf97489e4f1142eab81b#diff-a21bd58f460ace3ded3e7274f284ecb4a2e988db51fab687cc64c2dcdccc5093R345-R346 Fix confirmed on macOS Safari 16.5.2, Firefox 115.0.2 (Linux) and Chromium 115.0.5790.110 (Linux).

Changes

1 changed files (+3/-3)

• src/FigspecViewer/ViewerMixin.ts
  • @@ -275,9 +275,9 @@ })}
    ${svg` <svg class="guides" - viewBox="0 0 5 5" - width="5" - height="5" + viewBox="0 0 ${canvasSize.width} ${canvasSize.height}" + width=${canvasSize.width} + height=${canvasSize.height} style=${styleMap({ left: `${-canvasSize.x}px`, top: `${-canvasSize.y}px`,