Issue metadata
Sign in to add a comment
|
SVG sprite called via css background url / background position / background size no longer shows up on Chrome
Reported by
g.g.war...@gmail.com,
Sep 22 2016
|
||||||||||||||||||||||||
Issue description
Chrome Version : 53.0.2785.116
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari 5: Not Tested
Firefox 4.x: OK
IE 7/8/9: OK
What steps will reproduce the problem?
1. Add an svg sprite sheet to your project
2. Call it via background url
3. Position a sprite appropriately turn off border radius
I have not been able to replicate this 100% of the time.
What is the expected result?
That the sprites show up but we want border radius to work
What happens instead of that?
The sprites do not show in Chrome, they show in FF and IE w/ border radius.
Please provide any additional information below. Attach a screenshot if
possible.
Could this be a zooming issue? Border Radius for some reason disrupts the display of svg in Chrome? See screen shots attached.
Note "BorderRadiusOff.jpg" is in Chrome
UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
,
Sep 22 2016
,
Sep 22 2016
Hey, thanks for getting back to me. It looks like this issue is fixed on Chrome Canary which is v55. . . . My SVGs show up as intended. Is there a timeline on when this fixed can be pushed to the stable release? Thanks very much
,
Sep 22 2016
If my suspicion (in c#1) is correct, this fix will go to stable with Chrome 54 (~mid October.) Without a test to reproduce with, it's hard confirm 100% though.
,
Sep 23 2016
Because of the interaction with border-radius, I'm going to mark this as a duplicate of issue 632969 . It would be great however if you're able to provide a minimal snippet that shows the bug, so that we can verify. (I wouldn't want the new design of eia.gov to look broken now would I... ;-))
,
Sep 23 2016
Sure thing. Check out this fiddle below. The SVG doesnt show in Chrome v53.0.2785.116 m (but again shows fine in Canary, FireFox, and IE) if you get rid of the border-radius property and run it you will see the svg does show but of course in a square. https://jsfiddle.net/sejuz9k3/ :)
,
Sep 23 2016
Great! Can you clue me in on the structure/setup of the SVG? (No 'vdc-oc226' host on my network.) Does it have intrinsic size (<svg ... width="<something>" height="<something>">), viewBox (<svg ... viewBox="0 0 <something> <something>">) or maybe both?
,
Sep 23 2016
Ok, so I tried all combinations and found that my initial hunch was correct. Thanks for the help!
,
Sep 23 2016
No problem! not sure if you still need he svg structure but here it is just in case <svg id="Layer_41" data-name="Layer 41" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"> all the paths </svg> |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by f...@opera.com
, Sep 22 2016Components: Blink>SVG