New issue
Advanced search Search tips

Issue 807788 link

Starred by 2 users
Status: Available
Owner: ----
Cc:
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug

Blocking:
issue 848748



Sign in to add a comment

Chrome Does Not Perfectly Render Shapes

Reported by me.aasan...@gmail.com, Jan 31 2018 
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36

Steps to reproduce the problem:
Open this fiddle in Chrome:  https://jsfiddle.net/20353yLh/6/

Those are concentric circles, each having perfectly equal width and height.  In Chrome though, some of the circles are slightly, but noticeably oblongated.  

The attached gif demonstrates the difference in rendering between Chrome and Firefox.

Note:  I've also seen the same issue rendering concentric rectangles.

What is the expected behavior?
Shapes should be rendered perfectly.

What went wrong?
Shapes that were configured to have the same width and height sometimes render elongated in Chrome.

Other browsers don't have this issue.

See attached file demonstrating difference between Chrome and Firefox rendering.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: Version 64.0.3282.119 (Official Build) (32-bit)  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 28.0 r0
Chrome Imperfect Shape Rendering.gif
212 KB View Download

Comment 1 by krajshree@chromium.org, Feb 1 2018

Labels: Triaged-ET M-66 FoundIn-66 Target-66 Needs-Triage-M64 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Able to reproduce this issue on Mac 10.12.6, Win-10 and Ubuntu 14.04 using chrome reported version #64.0.3282.119 and latest canary #66.0.3335.0.
This is a non-regression issue as it is observed from M60 old builds. 

Hence, marking it as untriaged to get more inputs from dev team.

Thanks...!!

Comment 2 by f...@opera.com, Feb 1 2018

Components: Internals>Skia
Status: Available (was: Untriaged)

Comment 3 by fmalita@chromium.org, Feb 1 2018

Components: -Internals>Skia Blink>Paint
Doesn't look like Skia - I'm seeing anisotropic scales being pushed for some of the circles:

   4 Concat
Index: 30
{
  "command": "Concat",
  "matrix": [
    [
      1.012598872184753,
      0,
      383
    ],
    [
      0,
      0.9938470721244812,
      168
    ],
    [
      0,
      0,
      1
    ]
  ],
  "visible": true
}

4 DrawOval
Index: 31
{
  "command": "DrawOval",
  "coords": [
    0,
    0,
    53.33333206176758,
    53.33333206176758
  ],
  "paint": {
    "antiAlias": true,
    "color": [
      255,
      0,
      176,
      240
    ],
    "filterQuality": "low",
    "typeface": {
      "data": "/data/0"
    }
  },
  "visible": true
}

I'm guessing this has to do with container snapping, since the example uses border-box-relative sizing.

Comment 4 by f...@opera.com, Feb 1 2018 

Presumably this is then the additional transform that we apply in SVGRootPainter::PaintReplaced (TransformToPixelSnappedBorderBox). ISTR that causing troubles in another bug... (maybe it ought to never scale non-uniformly...)

Comment 5 by f...@opera.com, Feb 2 2018 

Found the related (probably duplicate) - issue 757196.

Comment 6 by me.aasan...@gmail.com, Feb 6 2018 

Thanks for looking into this.  Will there be plans of fixing this issue?  Are there any workarounds that I can try out?  Unfortunately, rounding the values doesn't work too well for me and results in elements of my graphics being visibly off-positioned.  I'm thinking can that "pixel-snapping" behavior be turned off somehow?

Thanks again.

Comment 7 by kbr@chromium.org, Jun 4 2018

Blocking: 848748
►

Sign in to add a comment