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:

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?

Saber

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. – Teran

I'm fine with a browser hack that reverts to PNG background actually. If suck a "trigger only Opera" hack exists though – Saber

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 – Saber

Answer 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..

Confectionery