New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 591424 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Mar 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug-Regression

Blocked on:
issue skia:5082



Sign in to add a comment

SVG stroke-dasharray does not work on Android with <meta name="viewport" content="width=device-width, minimum-scale=1.0">

Reported by nekr.fab...@gmail.com, Mar 2 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

Example URL:
https://m.oumy.com

Steps to reproduce the problem:
1. Go to https://m.oumy.com in Chrome Beta (tested only on Android)
2. See loading spinner which is complete circle

What is the expected behavior?
It should be Material Design animation spinner. SVG + CSS animation

What went wrong?
It seems like it doesn't perform SVG animation, dash-array by some reason is not animating.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes 48, stable channel

Does this work in other browsers? Yes 

Chrome version: 48.0.2564.116  Channel: beta
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 20.0 r0

This works in Stable and in Dev on Android, but is broken in Beta.
 
Components: Blink>SVG
Labels: -OS-Mac OS-Android

Comment 2 by f...@opera.com, Mar 2 2016

Components: Blink>Animation

Comment 3 by f...@opera.com, Mar 2 2016

Summary: Animation of SVG stroke-dasharray is not working (was: SVG animation is not working)
Yes, I actually meant that CSS animation of SVG's stroke-dasharray is not working. Sorry for misleading.

Comment 5 by suzyh@chromium.org, Mar 2 2016

Labels: Needs-Feedback
Can you provide a minimal test case that illustrates the problem? This would make it easier to reproduce.

(Extra data point: I could not repro on Linux desktop.)
Try this: https://m.oumy.com/#/test

Also here is couple of screenshots, first is Chrome Beta, second is Chrome Stable.
Screenshot_2016-03-02-23-04-49.png
38.3 KB View Download
Screenshot_2016-03-02-23-05-36.png
36.7 KB View Download

Comment 7 by suzyh@chromium.org, Mar 2 2016

Do you reproduce the problem with http://codepen.io/mrrocks/pen/EiplA ? This is an example that I found through Google and is closer to what I meant by minimal test case (although it's still not very minimal).
No, it's not reproducible there. I tested on other examples before posting here. It's only broken on m.oumy.com.

There cannot be more minimal example than that. If I will extract loading implementation from project it may work as those demos on codepen. So it's better test where it doesn't work.

Here is staging env without minification of JS and CSS, if this will help: https://html5.oumy.com:8080/#/test

Comment 9 by suzyh@chromium.org, Mar 2 2016

Labels: -Needs-Feedback Needs-Bisect
Status: Untriaged (was: Unconfirmed)
OK, thanks.
Okay, here is "minimal" demo and it works for me in Beta http://codepen.io/anon/pen/PNqJKe

Do not know what is going on when it's inside m.oumy.com. But works in stable.
Labels: -Needs-Bisect Needs-TestConfirmation
Status: Unconfirmed (was: Untriaged)
Whoops, made a mistake on the labels. Passing this issue over to the test team for confirmation.
Components: -Blink>Animation
Labels: -Type-Compat -Needs-TestConfirmation Needs-Bisect Type-Bug-Regression
Status: Available (was: Unconfirmed)
Summary: SVG stroke-dasharray does not work on Android with <meta name="viewport" content="width=device-width, minimum-scale=1.0"> (was: Animation of SVG stroke-dasharray is not working)
Able to repro using Android Chrome 50 (dev).

This does not require animations to repro, this is some weird interaction between <meta name="viewport" content="width=device-width, minimum-scale=1.0"> and SVG layout/paint.

Please bisect on Android using attached minimal test case.
test.html
380 bytes View Download
android-incorrect.png
137 KB View Download
desktop-correct.png
134 KB View Download
As far as I know, that <meta> tag enables "GPU Rasterization", so might be it.

Comment 14 by f...@opera.com, Mar 3 2016

Components: Internals>Skia

Comment 15 by f...@opera.com, Mar 3 2016

Looks like the dasharray is not being applied at all. Could be a bug with a circle/oval fast-path.
Just to know.. Is there a chance to have it fixed in Next Android Stable release?

Comment 17 by pdr@chromium.org, Mar 10 2016

Labels: -Needs-Bisect
Owner: caryclark@google.com
Chrome/WebView/etc are no longer tied to android releases, so that shouldn't be a problem like it was in the past. Sadly, I don't think it's possible to guarantee a specific fix timeframe. As a workaround, it sounds like you can tweak the meta viewport tag though (just remove minimum-scale).

@Cary, would you be able to look at this? It looka like a Ganesh bug.
Oh, I actually meant "before next Chrome Stable release on Android".

Yeah, I understand that it will help, just trying to figure out if I need to do it or not.
Labels: Hotlist-Ganesh
Owner: ----
Cc: fmalita@chromium.org jvanverth@chromium.org
Components: -Blink>SVG Internals>GPU>Rasterization
Labels: -OS-Android Merge-Request-50 OS-All
Owner: bsalomon@chromium.org
Status: Fixed (was: Available)
You are probably looking for a change made after 361277 (known good), but no later than 361299 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/79e75dc188e82f80fbf053694ccf4a0d2ef5ef4b..07ece06c99c9b15c5d2ea779239f856e066c97da

Most likely https://chromium.googlesource.com/skia.git/+/512e437e1e07159a258dd3c5b907576bd1aefc1e.

Brian landed a Ganesh workaround which fixes the issue: https://skia.googlesource.com/skia/+/6266dca7a7a991634d144cbc3a2c6cffefd67454

It would normally ship out in M51, but since it's a regression and the workaround is reasonable we should consider it for merging.
Btw, maybe it's good idea to have tests for it? I do not know how you do them, but if you gave them for painting then test for this issue should there, I think.
We have coverage for dashing in Blink's layout tests, but

1) only a subset of the layout tests are run with GPU rasterization enabled

2) this particular issue only manifests itself with distance-field path rendering, which I'm not sure whether is enabled/supported for all GL impls (so even if dashing tests are run against the GPU backend, chances are the Mesa-based test bots would not catch it)

Skia OTOH has more specialized GPU test bots, so it's a good idea to add a regression test to its suite.

Comment 24 by tin...@google.com, Mar 13 2016

Labels: -Merge-Request-50 Merge-Approved-50 Hotlist-Merge-Approved
Your change meets the bar and is auto-approved for M50 (branch: 2661)
Great news, thanks for fixing it.

@#23

I see, thanks for explanation. Hope that Skia will have more such tests :-)
Please try to merge your change to M50 branch 2661 ASAP if you think it is a safe merge as we're close to M50 Beta candidate cut for next week. Thank you.

Labels: -Merge-Approved-50
As per Comment #27, this is already merged to M50. So removing "Merge-Approved-50" label.

Comment 29 by pdr@chromium.org, Mar 18 2016

Labels: Hotlist-GoogleApps
This also affects the Google homepage, internal bug at go/591424.

I found a workaround is to use shape-rendering: crispEdges (this avoids the same ganesh codepath as the fix that landed).
Labels: -Hotlist-GoogleApps Hotlist-Partner-GSuite

Sign in to add a comment