Transform SVG in RTL direction with IE11 and Edge

[ludohe]

How to reproduce

• Leaflet version I'm using: 1.0.3
• Browser (with version) I'm using: Internet Explorer 11 & edge
• OS/Platform (with version) I'm using: windows

What behaviour I'm expecting and which behaviour I'm seeing

I use the leaflet.draw plugin version 0.4.2 to draw shape and IE11
When we draw a circle in rtl direction, the footprint moves and isn't displayed at the right place.

Minimal example reproducing the issue

Using http://jsfiddle.net/ludohe/tpkt9kyu/15/ and create a circle with IE11.

It's probably the same problem of #4754 issue

Proposition of changes

I think that IE11 doesn't accept transform inside the style tag of SVG.
I propose to change:

1. L.DomUtil.setTransform to manage SVG:

   setTransform: function (el, offset, scale) {
   
   	var pos = offset || new L.Point(0, 0);
   	if(el.tagName !== 'svg'){
   		el.style[L.DomUtil.TRANSFORM] =
   			(L.Browser.ie3d ?
   				'translate(' + pos.x + 'px,' + pos.y + 'px)' :
   				'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
   			(scale ? ' scale(' + scale + ')' : '');
   	} else {
   		el.transform =
   			(L.Browser.ie3d ?
   				'translate(' + pos.x + 'px,' + pos.y + 'px)' :
   				'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') +
   			(scale ? ' scale(' + scale + ')' : '');
   	}
   }

2. L.SVG._update to modify viewBox attribute of SVG:
   container.setAttribute('viewBox', [0, 0, size.x, size.y].join(' '));

What do you think about this proposition. Its' works with Firefox 47.0.1 and IE11 in LTR and RTL direction

[HarelM]

I think I have the same issue with leaflet 0.7.x.
As a workaround I set the dir=ltr for the map div and this seemed to solve the issue, although I haven't tested it thoroughly.

[HarelM]

Also happens on leaflet 1.0.x. The workaround described above is not so good as you'll need to set the direction of every tooltip/popover etc with the dir=rtl otherwise they will inherit it from the map element.

[perliedman]

@HarelM is this only in IE11 (as the bug title indicates), or reproducible in other browsers as well?

[HarelM]

I'm not supporting IE, but it happens on Edge as well. Doesn't happen on Chrome or FF.

[ludohe]

And what do you think about my proposition of changes of SVG

[HarelM]

I so wished this was fixed as part of 1.10... :-( any updates on this though?
Congrats on the release!

[perliedman]

No updates here.

It might seem like picking at details, but submitting an issue with suggested code changes is significantly more work for maintainers compared to a pull request: I have to manually figure out where these changes go, what version their made against, if they actually contain valid code, if the pass unit tests, and so on.

My suggestions if you want this to move ahead:

• Submit a pull request with any changes required
• Test this pull request thoroughly (different browsers, use test cases from the debug directory) - changes to a central class/method like DomUtil.setTransform is scary since it's easy to introduce breaking changes and/or performance regressions
• add unit tests if applicable

Leaflet is perhaps more than ever a community effort, so just waiting around for someone to step up and solve issues important to you is most likely not a good strategy.

[HarelM]

@perliedman Thanks for the info, I appreciate your point of view.
I personally have no clue what is the root cause of the bug or how to fix it.
I can agree that @ludohe 's code changes might be better as a pull request rather than a snippet here, but he did ask for a feedback regarding his code and where he wants to fix it - I believe from someone who has experience with leaflet and might have a clue if this kind of fix is in the right place or not.
Your comment on the change itself is very important, but came 4 month after the original question, which might cause the original developer to abandon his eagerness to help fix this.
I believe that your response is correct but very late - letting the developer know that you would appreciate it as a pull request, or in general what you think is the right approach when contacting leaflet team would also contribute to the community effort :-)

[jonkoops]

Closing this issue as we have decided to drop support for Internet Explorer in a future version of Leaflet (see #6136).