Using xlink:href in SVG can cause pointless style recalculations

[tomvandezande]

Edited by @evancz

The runtime behavior of justCirc and symAndUse is very different in the following code.

• With symAndUse the browser is recalculating styles on every animation frame.
• With justCirc it does not do this.

You can observe this by profiling the example with the Chrome timeline

import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import VirtualDom exposing (attributeNS)
import AnimationFrame
import Time exposing (Time)


-- PROBLEM

view : Model -> Html Msg
view model =
    let
        justCirc = [ circle [cx "50", cy "50", r "40", strokeWidth "8", stroke "red", fill "red"] [] ]

        symAndUse = 
            [ symbol [id "sym01"] justCirc
            , use [xlinkHref "#sym01", x "0", y "0", width "100", height "100"] []
            ]
    in
        svg [ viewBox "0 0 200 200", width "600px" ]
        --justCirc
        symAndUse


-- SETUP

main = Html.program { init = init, view = view, update = update, subscriptions = subscriptions }

type alias Model = Time

init : (Model, Cmd Msg)
init =
  (0, Cmd.none)

type Msg = Tick Time

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Tick newTime -> (0, Cmd.none)

subscriptions : Model -> Sub Msg
subscriptions model =
  AnimationFrame.times Tick

Original Comment:

SSCCE here

If you profile this example using the Chrome timeline, you can see that the browser is recalculating styles on every animation frame. Since the DOM isn't changing at all, this shouldn't be the case?
If you were to replace the last line symAndUse with justCirc, it does work as expected (no calculating restyles).

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[anka-213]

I believe the reason for this issue is that for all namespaced attributes the value is an object,

virtual-dom/src/Elm/Kernel/VirtualDom.js

Lines 263 to 270 in 5a5bcf4

	var _VirtualDom_attributeNS = F3(function(namespace, key, value)
	{
	return {
	$: 'a__1_ATTR_NS',
	__key: key,
	__value: { __namespace: namespace, __value: value }
	};
	});

which we then try to compare by reference.

virtual-dom/src/Elm/Kernel/VirtualDom.js

Lines 911 to 913 in 5a5bcf4

	// reference equal, so don't worry about it
	if (xValue === yValue && xKey !== 'value' && xKey !== 'checked'
	|| category === 'a__1_EVENT' && _VirtualDom_equalEvents(xValue, yValue))

This is bound to fail and force a patch every time we do a comparison on namespaced attributes.

---

It seems like Firefox is kinder when you use setAttributeNS with the old value, while Chrome forces a recalculation and will even try to re-fetch images from the network (see evancz/elm-playground#5 for an example).

[anka-213]

Adding a condition like this

 if (xValue === yValue && xKey !== 'value' && xKey !== 'checked' 
 	|| category === 'a__1_EVENT' && _VirtualDom_equalEvents(xValue, yValue)
        || category === 'a__1_ATTR_NS' && xValue.__namespace === yValue.__namespace && xValue.__value === yValue.__value)

to the if-clause in _VirtualDom_diffFacts should solve the problem.

[lydell]

To those who run into this: The easiest way to solve the problem with xlink:href these days is to switch to just href instead. xlink:href is deprected: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href. href has great browser compatibility: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href#browser_compatibility

-Svg.Attributes.xlinkHref "my-url"
+Html.Attributes.attribute "href" "my-url"

Note: Don’t use Html.Attributes.href since that is implemented by setting the .href property, which is readonly in SVG – only the href attribute can be set.

However, all Svg.Attributes.xlink* functions (not just Svg.Attributes.xlinkHref) suffer from this issue, and for the rest I don’t know the solution (I’ve never used any of them). But in that case #159 seems to be a correct PR.

It appears that all xlink:* attributes are deprecated, and that’s discussed in: elm/svg#22