SVG as CSS background, problems with zoom level in Opera

Question

I'm having difficulties using SVG background with Opera.

When I zoom out the page, the background starts repeating on the x axis despite `background-repeat: repeat-y'

I created a codepen showing off the problem with the first online SVG image I found.

body {
  background-image: url("http://www.anarchopedia.org/images/2/22/Heckert_GNU_white.svg");
  background-repeat: repeat-y;
}

And here is a screenshot of Opera's 12.14 behavior on my computer:

Opera starts repeating the background on the x axis when zooming out

The behavior exhibits for any SVG document with width="W" height="H" viewBox="0 0 W H" dimensioning.

I tried various values for width, height, viewBox and even preserveAspectRatio on the root <svg> element without much success so far.

Any hint please?

Known issue (CORE-33071). Not sure if there's a simple workaround, using <img>, <object>, <iframe> or plain inline svg instead of background-image is one way. — Erik Dahlström
– Erik Dahlström, Commented Mar 5, 2013 at 12:06
I'm fine with a browser hack that reverts to PNG background actually. If suck a "trigger only Opera" hack exists though — Gregory Pakosz
– Gregory Pakosz, Commented Mar 5, 2013 at 12:49
actually, removing the viewBox solves half of the problem: zoon in works, zoom out still broken. Too bad the CORE-33071 bug report isn't public — Gregory Pakosz
– Gregory Pakosz, Commented Mar 5, 2013 at 12:52

MarmiK · Accepted Answer · 2013-05-31 07:00:24Z

1

Its not simple as Opera does not redraw the Image after Resize,

refer this link

this link explains how to force opera to redraw the image after zoom,

I have tried the easy way but not working,

so I think this is the only way to deal with opera bug. Seems it is using MathJax framework,

I hope this may help..

answered May 31, 2013 at 7:00

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1