[Isomorphic]

Hi Isomorphic,
Too bad, as this would have been one of the big improvements - only needing one image file instead of many (_Over, _Disabled, etc.)
But this way it will still be more easy to color the images on hover in a customer color.

We've made an improvement in SGWT/SC 12.1d so that events are actively forwarded from the SVG by handlers, which allows us to avoid writing out the "pointer-events:none" CSS. This should be in today's nightly builds dated 2018-08-22.

So hover CSS should now work when writing SVG into an object tag, and in your code from post #18, the hover CSS should work now - of course you'll have to manually suppress any state change (and the required extra SVG files) that you don't want via setShowRollOver(false) or similar.

[Blama]

Hi ICPP,

just FYI, the problem seems to be with the svg file, which does not scale. See this example:

isc.Img.create({
    useImageForSVG: false,
    size: 200,
    src: "https://upload.wikimedia.org/wikipedia/commons/0/07/Tango-style_info_icon.svg"
});

isc.Img.create({
    top: 200,
    useImageForSVG: false,
    size: 200,
    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
})

But I agree that you should turn the feature off to get back your behavior. The advantage of the <object> is only that you can style the SVG with external CSS. If you don't do this, I believe <img> will be better, as it is faster (which seems to be a browser problem).

Isomorphic: Because of the sample ICPP showed, it might be a good idea to default this to true, in order to have the old behavior back for those users. I can set it to true in my load_skin.js.

Best regards
Blama

[ICPP]

My problems with regard to clicking and the pointer are fixed using the latest version (v11.1p_2018-04-17), thanks! The scaling issue can be worked around with useImageForSVG but I'll give reproduction code for completeness' sake:

isc.Button.create({
    useImageForSVG: false,
    icon: "https://upload.wikimedia.org/wikipedia/commons/0/07/Tango-style_info_icon.svg"
})

Flip the flag and you'll see how it should have been rendered (and how it was rendered before rendering svg-images with <object>). Chrome 65.0.3325.181 and Firefox 59.0.2.

[Blama]

Hi Isomorphic,

I can see this is fixed in the sample using v11.1p_2018-04-17 and I'm pretty sure it will also fix the issue in my application.

Thanks a lot,
Blama

[Isomorphic]

The fix for the issue in post #32 should be in today's builds, dated 2018-04-16, for SGWT 6.1p/11.1p and newer releases (the only ones affected).

[Isomorphic]

This is not what is happening. In the video you can see that the URL stays the same. No _Over or similar suffix. It just re-requests the same file, perhaps the DOM object is removed and added again?

Yes, we're aware of that, and the specific situation from your sample code likely can be prevented. However, we wanted to set expectations in case you were hoping that all cases of flickering would be addressed quickly.

[Blama]

Hi Isomorphic,

We're looking into how to mitigate some of the unwanted browser behavior you've pointed out above for SVG in <object> tags, but note that if you're actually switching what svg the <object> references, such as occurs for the different states of an ImgButton, the flickering is probably normal browser behavior that may not be simple to hide.

This is not what is happening. In the video you can see that the URL stays the same. No _Over or similar suffix. It just re-requests the same file, perhaps the DOM object is removed and added again?

There is not currently any way to disable the "pointer-events: none" CSS if you want an <object> tag, but we were suggesting that we could add that capability, except for ImgButtons where it doesn't seem to make sense - since then you wouldn't be able to click on it.

I do think that such a setting would be useful in edge cases, but only as option on Canvas, like the useImageForSVG you mentioned. That way, one could have the SVG-CSS-:hover effects, if a click is not needed. I personally don't have a use case for this right now, as an "Over" action means it is an active GUI element and here the user will also expect to be able to click it.
If there is a way to bubble the click from the <object> to the main Layout-object, this would be very useful, but I don't know this and assume it is not the case.
The full solution, that most likely will also make this option unnecessary, is this enhancement suggestion.

Best regards
Blama

[Isomorphic]

We're looking into how to mitigate some of the unwanted browser behavior you've pointed out above for SVG in <object> tags, but note that if you're actually switching what svg the <object> references, such as occurs for the different states of an ImgButton, the flickering is probably normal browser behavior that may not be simple to hide.

Hi Isomorphic,
could you explain how to test/use this feature?

You can set Canvas.useImageForSVG: true to get the old behavior back of rendering SVG in an <image> tag. This was an undocumented attribute but we'll expose it now.

Hi Isomorphic,
could you explain how to test/use this feature?
Can you also explain this? I'm pretty sure I won't use it as I need the _Over-versions anyway, but it would be good to know.

There is not currently any way to disable the "pointer-events: none" CSS if you want an <object> tag, but we were suggesting that we could add that capability, except for ImgButtons where it doesn't seeem to make sense - since then you wouldn't be able to click on it.

[Blama]

Hi Isomorphic,

could you explain how to test/use this feature?

There's already a (currently undocumented) flag to force <image> to be used rather than <object> (the previous behavior).

Can you also explain this? I'm pretty sure I won't use it as I need the _Over-versions anyway, but it would be good to know.

If you mean you want a way to disable the "pointer-events: none" CSS so that hover CSS in your SVG works (fixing your cursor as well), that would be easy enough and would perhaps work for an Img, but for a ImgButton it may not make much sense, as it would mean the Framework wouldn't get any clicks.

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

I'm now copying the images for _Over etc. and linking a stylesheet from there like you do in your sample. The stylesheet is actually a JSP and dynamically returns a color code. This way I have some files more than needed in the best case, but this is actually not important.

It seems though, there is still a subtle but annoying difference between SVG (as <object>) and PNG (as <img>) left.

Please see this modified testcase (v11.1p_2018-04-06):

isc.IButton.create({
    title: "Hello",
    icon: "icons/16/world.png",
    iconOrientation: "right",
    click: "isc.say('Hello world!')"
})
isc.IButton.create({
    top: 50,
    title: "Hello",
    icon: "[SKINIMG]NavigationBar/miniNav_up.svg",
    iconOrientation: "right",
    click: "isc.say('Hello world!')"
})

As you can see in the video below, hovering the SVG causes a request, served from cache, and also an annoying flickering of the image. Both do not happen for the PNG.



Best regards
Blama

[Blama]

Hi Isomorphic,

Note that the issue you report in post #18 (item 7) cannot be easily solved in our Framework at this time. In order to address the problem of the SVG swallowing events for button clicks, etc., we need to set the "pointer-events: none" attribute on the <object> tag in the containing page. However, this has the impact of also preventing any "hover" events from triggering the CSS in the SVG. (That's why you appeared to see a regression when the other problem got fixed.)

So instead of using CSS in your SVG like:

svg:hover > path {fill: red !important;}

you'll need to define your XXX_Over.svg variant to apply the hover style. You could either have that SVG apply a different CSS sheet, or set a class attribute on its <svg> tag that you then key off in a common CSS.

Too bad, as this would have been one of the big improvements - only needing one image file instead of many (_Over, _Disabled, etc.)
But this way it will still be more easy to color the images on hover in a customer color.

Similarly, this CSS won't work,

.imgButtonOver > svg > path {fill: red !important;}

because the CSS classes applied to the <object> tag or its parent <divs> in the containing page don't jump the doc boundary. The solution is the same as for the other problem.

This is what I already wrote in this enhancement suggestion. If you included the SVG in the DOM directly, this should then work. I did not test the different ways of doing so (dump svg text vs base64-Data-URI, if possible), yet.

Best regards
Blama

[Isomorphic]

The changes to correct some of the issues you mention - though not the problem with hover CSS not tripping - will be going into SC 11.1p today and be in tomorrow's build. Today's build of SC 12.0d already includes those fixes so you can take a look now if that's easy for you.

Once you have the release with the changes, you can enumerate the remaining issues. There's already a (currently undocumented) flag to force <image> to be used rather than <object> (the previous behavior). If you mean you want a way to disable the "pointer-events: none" CSS so that hover CSS in your SVG works (fixing your cursor as well), that would be easy enough and would perhaps work for an Img, but for a ImgButton it may not make much sense, as it would mean the Framework wouldn't get any clicks.

We're not sure why icon sizing would be affected as it appears that we currently write out explicit sizes on the <object> tag for icons, but if it remains a problem after the mentioned changes, we can take a look if you can provide repro code.

[ICPP]

I've hit some regressions because of these changes. I use some svg images as button and dialog icons but these are now rendered way too large and become clipped. Furthermore, icons stopped being clickable and the mouse cursor stopped being a hand. This is one of the images.

Any thoughts on this other than converting the svg images to png (which seems to be the wrong way around) or reverting to a version before these changes? Currently using v11.1p_2018-03-17/PowerEdition and Google Chrome 65.

[Isomorphic]

Note that the issue you report in post #18 (item 7) cannot be easily solved in our Framework at this time. In order to address the problem of the SVG swallowing events for button clicks, etc., we need to set the "pointer-events: none" attribute on the <object> tag in the containing page. However, this has the impact of also preventing any "hover" events from triggering the CSS in the SVG. (That's why you appeared to see a regression when the other problem got fixed.)

So instead of using CSS in your SVG like:

svg:hover > path {fill: red !important;}

you'll need to define your XXX_Over.svg variant to apply the hover style. You could either have that SVG apply a different CSS sheet, or set a class attribute on its <svg> tag that you then key off in a common CSS.

Similarly, this CSS won't work,

.imgButtonOver > svg > path {fill: red !important;}

because the CSS classes applied to the <object> tag or its parent <divs> in the containing page don't jump the doc boundary. The solution is the same as for the other problem.

[Isomorphic]

For the issue in post #18 (item 7), are you assuming the sample SVG you provided is installed to miniNav_up_Over.svg as well, since that's what will be rendered during a hover? You can see such stateful behavior in item 2 when the png disappears (it's actually a broken link for us) and #1 will have similar behavior as well.