Check SVG -> PNG fall-back image loading in Opera 9
Closed, DeclinedPublic
Actions

Assigned To

None

Authored By

	• GWicke
	Jun 14 2016, 1:35 AM

Description

From https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=725174734#New_formulas_layout:

Who and why have changed layout of formulas? Now I can't see formulas in my browser Opera 9.27 [http://opera-usb.com/download/opera927int.zip] https://s.sender.mobi/u/image/2016/6/11/bvB7Yijef/-.JPG . Yes, it's old but my computer has not enough resources for newer browser. Please explain what gain gives new layout and what was purpose.

It sounds like the PNG fall-back is not loaded properly. One possibly is that this Opera version claims to support SVG (by returning true for document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1')), but does not implement it well enough yet.

If this turns out to be the case, we might be able to fix the user experience by changing the test to trigger PNG fall-back rendering for this browser.

See also this related task: T136905: MathML/SVG/PNG mode causing problems with Nook Tablet.

Details

	Subject	Repo	Branch	Lines +/-
	Disable svg formulas on opera 9	mediawiki/extensions/Math	master	+17 -1
	Don't use img SVGs on Opera 9 and earlier	mediawiki/extensions/Math	master	+3 -1

Customize query in gerrit

Related Objects

Mentioned Here: T136905: MathML/SVG/PNG mode causing problems with Nook Tablet.

Event Timeline

• GWicke created this task.Jun 14 2016, 1:35 AM

Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 14 2016, 1:35 AM

• GWicke triaged this task as Medium priority.Jun 14 2016, 2:11 AM

• GWicke added a project: Math.

• GWicke added a project: Services.

• GWicke added subscribers: Physikerwelt, • mobrovac.

• GWicke updated the task description. (Show Details)Jun 14 2016, 2:14 AM

@zeljkofilipin is it possible to add more browsers to the math selenium tests? Otherwise an uphill battle against all kinds of exotic browsers might be ahead.
http://caniuse.com/#search=svg does not include Opera 9.27 as far as I can see

@Physikerwelt sure, all you have to do is to add browser (with optional version) to ci.yml

Supported browsers are listed at https://saucelabs.com/platforms/

I do not see Opera 9, only 11 and 12.

It seems they have actual documentation at Opera.. http://www.opera.com/docs/specs/opera9/svg/

Aklapper added a project: Browser-Support-Opera.Jun 14 2016, 1:16 PM

In T137765#2379162, @TheDJ wrote:

It seems they have actual documentation at Opera.. http://www.opera.com/docs/specs/opera9/svg/

Sigh, it looks like some tags are supported while others are not. Should we just use the PNG fallback for older Opera versions?

In T137765#2379620, @mobrovac wrote:

Should we just use the PNG fallback for older Opera versions?

This sounds like the best approach to me. Targeting a specific browser by user agent (or similar) is a bit icky, but if this is the only exception to the feature test, then it should be easily manageable.

If it helps, it looks to my untrained eye that SVGs can work, but only in <object> tags.
Example:

<html>
  <body>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Letters_SVG.svg"/>
    </br>
    <object data="https://upload.wikimedia.org/wikipedia/commons/b/b0/Letters_SVG.svg"/>
  </body>
</html>

produces two images in chrome, but in opera 9.27 it only produces one image (the second):

https://css-tricks.com/test-support-svg-img/

It looks like we have found the exception to the rule. The older "try to load an SVG" modernizr test described in the article linked by @TheDJ might be more reliable:

Modernizr.addAsyncTest(function () {
  var img = new Image();

  img.onerror = function () {
    addTest('svgasimg', false);
  };
  img.onload = function () {
    addTest('svgasimg', img.width == 1 && img.height == 1);
  };

  // 1px x 1px SVG; must be base64 or URI encoded for IE9... base64 is shorter
  img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==';
});

@crh23: If you have a chance, could you try http://codepen.io/chriscoyier/pen/bADFx in Opera 9, and see if the older test returns "no SVG support"?

@GWicke It doesn't return anything, because that test uses jQuery 2.1 for some reason, and jQuery 2.1 doesn't support Opera 9. I can't figure out how to modify the codepen to change it… (I have Opera 9.64 installed for testing.)

Testing the code manually: on Opera 9.64, the first method returns true, the second returns false.

@matmarex: Thanks a lot!

So, should we revert to the older Modernizr code for SVG <img> support detection?

Possibly, or special-case the oldest versions of Opera and use <object> instead of <img> for them, as suggested in T137765#2380044.

How is the fallback implemented? I'll note that we don't serve JavaScript to Opera 9 (we apparently only support 10.5 for Grade A, and in reality only Opera 12 is ever tested, by me).

My Opera 9.64 actually displays the <img> ones too and seems to render the math at https://en.wikipedia.org/wiki/Help:Displaying_a_formula just fine. Perhaps we should just suggest that the original bug reporter upgrade to it. 9.64 was the final release of Opera 9, and I believe it has the same system requirements as his version (fun fact, it's the most modern browser that runs on Windows 98).

@matmarex the original reporter (37.53.235.112) was pretty clear on their thoughts on upgrading, see here and here. Specifically, they don't see that as a solution to the problem: apparently having SVGs in <img> tags is against standard.

Nonsense, it's not against standard. The HTML5 spec even names SVG as one of the possible formats for <img src>:

https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

Note: The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root element that use declarative SMIL animation), and so forth. However, these definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

I believe the SVG files generated by the Math extension are simple static images, without any scripts or other interactivity.

I'm sure they would be just as happy with 9.64 as they are with 9.27. I'm not really interested in trying to convince anyone about this myself, so feel free to relay my words.

• GWicke renamed this task from Check PNG fall-back image loading in Opera 9 to Check SVG -> PNG fall-back image loading in Opera 9.Jun 15 2016, 10:39 PM

• GWicke added a subscriber: • brooke.

How to register here? When I go https://phabricator.wikimedia.org/auth/start/ I see blue button "Login or Register". Why it works only as "Login" (when I choose unique login and password, js shows "Username or password are incorrect.")?

Nonsense, it's not against standard. The HTML5 spec even names SVG

Opera 9, 10, 11 have not support of HTML5.

W3C recommends object tag.
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML [Secondly, it is worth pointing out that only <object> works consistently with the W3C standards, meaning at this time one must choose between standards consistency, or browser consistency.]

zeljkofilipin unsubscribed.Jul 2 2016, 10:31 AM

Developer said that problem will be fixed https://en.wikipedia.org/w/index.php?title=User_talk:37.53.235.112&oldid=725919966

But I still have problems https://s.sender.mobi/u/image/2016/8/21/DFBec6bzQ/-.JPG

I have written macro for MS Word to manually convert some page to working in my browser, but it takes lot of time. Please, fix problem as was promised.

Sub MACRO1()
' paste page source from clipboard (you can get source in Opera 9.27 by clicking next : View > Source > Ctrl+A > Ctrl+X)
    Selection.WholeStory
    Selection.Paste
    
' replace img for object (W3 recommendation [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML] )
    Selection.Find.ClearFormatting
    Selection.Find.Replacement.ClearFormatting
    With Selection.Find
        .Text = _
            "img src=""https://wikimedia.org/api/rest_v1/media/math/render/svg/"
        .Replacement.Text = _
            "object data=""https://wikimedia.org/api/rest_v1/media/math/render/svg/"
        .Forward = True
        .Wrap = wdFindContinue
        .Format = False
        .MatchCase = False
        .MatchWholeWord = False
        .MatchWildcards = False
        .MatchSoundsLike = False
        .MatchAllWordForms = False
    End With
    Selection.Find.Execute Replace:=wdReplaceAll
    
    
    Selection.Find.ClearFormatting
    Selection.Find.Replacement.ClearFormatting
    With Selection.Find
        .Text = "/></span>"
        .Replacement.Text = "></object></span>"
        .Forward = True
        .Wrap = wdFindContinue
        .Format = False
        .MatchCase = False
        .MatchWholeWord = False
        .MatchWildcards = False
        .MatchSoundsLike = False
        .MatchAllWordForms = False
    End With
    Selection.Find.Execute Replace:=wdReplaceAll
    
' cut edited source from MS Word. You can paste it in Opera and Apply changes (Ctrl+R)
    Selection.WholeStory
    Selection.Cut
End Sub

Username160611000001 added a comment.Aug 21 2016, 6:02 AM

This comment was removed by Username160611000001.

Why are we trying to support v9.27?

Just to give you an idea of the age of the browser, in case people haven't double-checked, 9.27 was released in 2008, a year before MS IE 8. Opera 9.64, the final version of Opera 9, was released in early March 2009, about 2 weeks before IE 8 was released.

Just, you know, asking an innocent question. :D

@Username160611000001

fix problem as was promised.

No one promised we would fix it, just that we would investigate.

Developer said that problem will be fixed

That was not a developer, just a fellow editor trying to help you forward

Opera 9, 10, 11 have not support of HTML5.

Exactly and those browsers are not supported by us. If you use them, you should expect that at times you will receive reduced functionality. In general we try to avoid that, but it is possible.

@Izno

Why are we trying to support v9.27?

We try to avoid to break as little as possible though. If this really is a question of replacing an SVG capability test with another SVG capability test, then that might be worth to have a volunteer try doing, regardless of wether the browser is supported or not.

Paladox subscribed.Sep 21 2016, 1:03 PM

Does replacement <img src=...> for <object data=...></object> work on other browsers with HTML5? If yes, why not implement such replacement?

we had something like that before. But the rendering quality of the svg images in IE was not as good as with IMG tags.

In T137765#2655729, @Izno wrote:

Why are we trying to support v9.27?

You must support v9.27 solely and none of other browsers. Can you prove the contrary?

Something like https://gerrit.wikimedia.org/r/#/c/226713/25/MetrolookTemplate.php ?

Which should use svg for object and fallback to img png if svg wont work for object.

In T137765#2656104, @Physikerwelt wrote:

we had something like that before. But the rendering quality of the svg images in IE was not as good as with IMG tags.

I tried it with https://gerrit.wikimedia.org/r/#/c/226713/25/MetrolookTemplate.php and it looked good. I used ie11, windows 10.

In T137765#2656123, @Username160611000001 wrote:

In T137765#2655729, @Izno wrote:

Why are we trying to support v9.27?

You must support v9.27 solely and none of other browsers. Can you prove the contrary?

Note that the official MediaWiki Compatibility Matrix lists only Opera 10.0+ for basic compatibility.

@Paladox: Did you know that there is already a png fallback image. Maybe this very specific problem can be solved by a custom user script that replaces the svgs with the png images.
For the furute, I think we should focus our efforts to better mathml support.
For instance, there were significant improvements to recet versions of webkit
https://webkit.org/blog/6803/improvements-in-mathml-rendering/

Yes, for example Opera 9.27 shows image https://wikimedia.org/api/rest_v1/media/math/render/svg/366e5fad98810346603f2f748934b2b0c3ac61a4 when it pasted in address bar. And it also shows https://wikimedia.org/api/rest_v1/media/math/render/png/366e5fad98810346603f2f748934b2b0c3ac61a4 .

But when the former is in img-tag it is not shown at all. And when the latter is in img-tag it is resized https://s.sender.mobi/u/image/2016/9/21/xjwk21P5D/-.PNG with poor quality.

When I make replacement images are shown like that https://s.sender.mobi/u/image/2016/9/21/62mTfNGmo/-.PNG (much better quality).

Change 312019 had a related patch set (by Paladox) published:
Disable svg formulas on opera 9

https://gerrit.wikimedia.org/r/312019

gerritbot added a project: Patch-For-Review.Sep 21 2016, 3:56 PM

Change 312019 abandoned by Paladox:
Disable svg formulas on opera 9

https://gerrit.wikimedia.org/r/312019

Change 312019 restored by Paladox:
Disable svg formulas on opera 9

https://gerrit.wikimedia.org/r/312019

Change 312019 abandoned by Paladox:
Disable svg formulas on opera 9

Reason:
Per Physikerwelt

https://gerrit.wikimedia.org/r/312019

Paladox removed a project: Patch-For-Review.Sep 21 2016, 4:16 PM

Paladox removed a subscriber: gerritbot.

@Physikerwelt Can we close this already? Opera 9 is not even supported by mediawiki

I think putting the javascript into the user space that replaces svg with png is as good as its gets.

Change 315654 had a related patch set uploaded (by TheDJ):
Don't use img SVGs on Opera 9 and earlier

https://gerrit.wikimedia.org/r/315654

gerritbot added a project: Patch-For-Review.Oct 13 2016, 10:29 AM

@TheDJ's patch looks sane to me. @Physikerwelt ?

Yes, but it was not there, when I closed the task.

Change 315654 abandoned by TheDJ:
Don't use img SVGs on Opera 9 and earlier

https://gerrit.wikimedia.org/r/315654

@Physikerwelt, do you think it makes sense to resurrect and merge the patch?

• GWicke edited projects, added Services (watching); removed Services.Jul 12 2017, 5:17 PM

The risk is that people that do not use opera <10 will see png images instead of svg images. I think this would not be so critical. On the other hand, I was convinced by @Pchelolo argument

In T137765#2711256, @Pchelolo wrote:

@Physikerwelt Can we close this already? Opera 9 is not even supported by mediawiki

In T137765#3431504, @GWicke wrote:

@Physikerwelt, do you think it makes sense to resurrect and merge the patch?

Just for the record, neither of these patches is viable because they attempt to detect Opera 9 in JavaScript to "fix" the image, but the thing is, JavaScript isn't meant to run there in the first place. The only way to address it is through HTML or CSS.

Is the default HTML rendering serving the PNG or the SVG?

Physikerwelt removed Physikerwelt as the assignee of this task.Dec 2 2018, 5:04 PM

Pkra moved this task from Inbox to SVG specific on the Math board.Dec 8 2018, 12:10 AM

• mobrovac added a project: Platform Team Legacy (Watching / External).Dec 20 2018, 12:04 PM

Is the default HTML rendering serving the PNG or the SVG?

SVG (as img tag src)

The only way to address it is through HTML or CSS.

I think https://css-tricks.com/a-complete-guide-to-svg-fallbacks/ is still a pretty good summary.

If the equation svg markup was inlined in the HTML (which would have several other benefits), then the <image src> trick could work. But perhaps the <title> might be enough for unsupported browsers anyway.

It seems to me like WMF engineers need to weigh in here (rather than the community), stating what they are comfortable shipping.

@crh23 @Pkra If you or someone you know is affected by this; you should consider switching to a different browser. I did see the note about the computer of the original reporter being tool old for a modern browser. That is unfortunate, but there are still options besides Opera 9 that do support SVG. For example, Firefox 2 and Firefox 3 support SVG.

And unlike Opera 9, Firefox 3 is still supported by Wikimedia Foundation under the "Grade C" experience (see https://www.mediawiki.org/wiki/Compatibility#Browser_support_matrix).

I'm closing this report because Opera 9 is no longer supported, not even the basic experience. There is also a good chance that anyone using Opera 9 is unable to connect to Wikipedia.org in the first place, due to the HTTPS/TLS requirements we have as of 1 year ago. But even if Opera 9 does support modern TLS (I'm not sure), it will be at your own risk, and that likely means text and layout only, not MathML images.

I'm closing this report per our Compatibility guideline, with the recommendation to use (an old version of) Firefox that works on the same machine.

I'm closing this report per our Compatibility guideline, with the recommendation to use (an old version of) Firefox that works on the same machine.

Thanks for resolving this, @Krinkle .

	F4165315: SVG Broken.PNG
	Jun 14 2016, 4:22 PM

Check SVG -> PNG fall-back image loading in Opera 9Closed, DeclinedPublicActions

Description

Details

Related Objects

Event Timeline

Check SVG -> PNG fall-back image loading in Opera 9
Closed, DeclinedPublic
Actions