Svg stacking layers become see-through with css opacity style in WebView
Reported by
yc...@ixl.com,
Mar 21 2016
|
|||||||
Issue descriptionExample URL: Steps to reproduce the problem: 1. This happens pretty consistently across all Android devices that we tested on. An example will be a Nexus 9 with Android 5.0. 2. Open an app that uses WebView to render content. Render the following html: <div opacity="0.4"> <img src="svgImageWithStackingLayers"> </div> 3. You will see that the layers of the image become transparent; the once-covered bottom layers can be seen through the transparent top layers. What is the expected behavior? We have attached screenshots of the same svgs' behavior on desktop. The svg as a whole should become transparent, but its bottom layers should not show through the top layers. What went wrong? We are using WebView to render web contents on our Android app. We found that if an svg has multiple layers stacking and covering lower layers, when we set the opacity of the svg to less than 1 in WebView, each layer in the svg becomes transparent and you can see bottom layers through the top layers. We have attached screenshots to demonstrate the problem as well. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 48.0.2564.106 Channel: n/a OS Version: 5.0 Flash Version: Shockwave Flash 21.0 r0
,
Mar 23 2016
any reason why this is marked as Mobile>WebView? I see Chrome 48 in the description so looks like a general chrome bug?
,
Mar 29 2016
,
Mar 30 2016
I've tried to repro this on non-WebView (M48 and M49; Opera and Chrome) - using this: https://jsfiddle.net/75k8fgv9/ - without success. Adding back WebView label (this is what the OR specifically mentions in the report after all.) @ycsun: Did you check if this works outside of WebView?
,
Mar 30 2016
We are pretty sure that this is not reproducible outside of WebView. Mobile chrome does not have this issue either.
,
Mar 30 2016
Ok, thank you for confirming.
,
Apr 4 2016
I don't see any issues on webview either on trunk. What webview version are you using? can you share the app as well?
,
Apr 4 2016
,
Apr 4 2016
Device: Nexus 9 Android version: 5.0.1 Webview version: 48.0.2564.106 The name of the app is IXL Math Practice. You can also try to reproduce this bug in the app itself: 1. Open the "IXL Math Practice" app, and select "continue as guest". 2. Select the "Kingdergarten" badge; then select "K.Positions". Select "K.1 Inside and Outside" from the list. 3. When you do the questions, select the wrong answers and then tap "submit". 4. In the "The correct answer is..." section, the un-highlighted picture is somewhat opaque, and you will see the that the bottom layers of the svg is showing through. This effect may be more noticeable in some questions than others. I have attached a screenshot as a reference.
,
Apr 4 2016
,
Apr 5 2016
Any reason why the webview is in a software layer? Webview can't use resources like intermediate surfaces when drawing in softwre mode, so that could be why things doesn't look right compared to chrome (and why we couldn't repro). Also it's making scrolling webview *super* slow. Software mode is a legacy mode, and we don't really fix software-only rendering issues anymore
,
Apr 5 2016
,
Apr 5 2016
@boliu, is http://developer.android.com/guide/topics/graphics/hardware-accel.html the best practices for enabling hardware acceleration for their layers?
,
Apr 5 2016
Yep. afaict there is no reason to put webview into a layer of any kind here, should just use LAYER_TYPE_NONE. "layer" here in android is more like RenderSurface in cc. Hardware layer is backed by a texture, and software by a bitmap. Generally there are very few good reasons for using a layer.
,
Apr 6 2016
Thanks for the response! We will look into removing the software layer as you suggested. |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by rsgav...@chromium.org
, Mar 21 2016