eerlijkdilemma.op.vpro.nl - Scoremeter cursor is displayed misaligned

[webcompat-bot]

URL: https://eerlijkdilemma.op.vpro.nl/

Browser / Version: Firefox Mobile 81.0 Operating System: Android Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: The dial at the end showing results is misaligned.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20200820093209
• channel: nightly
• hasTouchScreen: true

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. After passing all 6 stages and the end there is a

Note: The issue is also reproducible on Desktop.

Affected area:

<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="300" height="240" viewBox="0 0 300 240" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="scoremeter.svg">
    <defs id="defs4">
        <inkscape:path-effect effect="bend_path" id="path-effect4201" is_visible="true" bendpath="M 244.99369,181.27971 C 158.19527,113.40803 211.45515,-1.0900793 299.7369,-1.0900793 c 88.28175,0 141.29808,113.6922693 55.22681,182.5585093" prop_scale="1" scale_y_rel="false" vertical="false" bendpath-nodetypes="czc"/>
        <inkscape:path-effect effect="bend_path" id="path-effect4193" is_visible="true" bendpath="m 120,-32.637859 c 77.27667,101.520331 235.09642,155.058419 325,0" prop_scale="1" scale_y_rel="false" vertical="false" bendpath-nodetypes="cc"/>
    </defs>
    <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.4142136" inkscape:cx="110.1948" inkscape:cy="167.37029" inkscape:document-units="px" inkscape:current-layer="svg2" showgrid="true" units="px" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:snap-bbox="true" inkscape:bbox-paths="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-bbox-midpoints="true" inkscape:snap-nodes="true" inkscape:bbox-nodes="true" inkscape:window-width="1596" inkscape:window-height="864" inkscape:window-x="0" inkscape:window-y="16" inkscape:window-maximized="0" inkscape:object-paths="true" inkscape:snap-intersection-paths="true" inkscape:object-nodes="true" inkscape:snap-smooth-nodes="true" inkscape:snap-midpoints="true" inkscape:snap-object-midpoints="true" inkscape:snap-center="true">
        <inkscape:grid type="xygrid" id="grid4136" originx="-100" originy="-752.36214"/>
    </sodipodi:namedview>
    <metadata id="metadata7">
        <rdf:RDF>
            <cc:Work rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
                <dc:title/>
            </cc:Work>
        </rdf:RDF>
    </metadata>
    <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-150,30)">
        <circle style="opacity:1;fill:#333333;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path4142" cx="300" cy="100" r="40"/>
        <g id="g4185" inkscape:path-effect="#path-effect4201" transform="translate(0.5246492,1.355605)">
            <path style="opacity:1;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 229.59408,200.97367 c -11.70899,-9.09086 -22.41816,-20.02292 -31.33079,-32.76669 -7.78866,-11.1818 -13.87186,-23.70438 -17.77434,-37.1445 l 0,-1e-5 c -1.52665,-5.37435 -2.67177,-10.82294 -3.43975,-16.30545 l 49.47508,-6.92189 c 0.44661,3.19896 1.11714,6.34724 2.01599,9.40453 2.21682,7.83196 5.97696,15.46211 10.80517,22.46719 l 0,0 c 5.5238,8.06594 12.80533,15.36874 21.04786,21.8789 z" id="rect4144" inkscape:original-d="m 119.47535,-58.993465 55,0 0,50 -55,0 z" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/>
            <path style="opacity:1;fill:#f04000;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 177.0492,114.75702 c -2.76539,-19.741595 -0.64091,-39.922935 6.1675,-58.661235 5.29659,-14.516293 13.21488,-27.902847 23.2694,-39.493965 l 37.78154,32.747655 c -6.08556,7.029978 -10.93533,15.198747 -14.06387,23.84061 -3.99252,10.950181 -5.28766,23.126123 -3.67949,34.645045 z" id="rect4144-3" inkscape:original-d="m 174.47535,-58.993465 55,0 0,50 -55,0 z" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/>
            <path style="opacity:1;fill:#ffa100;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 206.4861,16.60182 c 6.07135,-6.999211 12.92163,-13.3437592 20.44395,-18.8870738 21.13119,-15.4418772 46.69311,-23.7597572 72.76501,-23.8047602 l 0.0173,49.999881 c -15.28274,-0.03068 -30.98155,5.051237 -43.17565,14.096877 -4.46904,3.267964 -8.59436,7.097731 -12.26908,11.342731 z" id="rect4144-6" inkscape:original-d="m 229.47535,-58.993465 55,0 0,50 -55,0 z" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/>
            <path style="opacity:1;fill:#d2d500;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 299.69506,-26.090014 c 0,0 0.0418,-6.5e-5 0.0418,-6.5e-5 0,0 0,1e-6 0,1e-6 26.0196,0.02737 51.57195,8.273399 72.73799,23.6635336 l 0,3.2e-6 c 7.54036,5.5330378 14.40655,11.8718819 20.49102,18.8688942 L 355.22479,49.235217 C 351.54921,44.999433 347.42261,41.18091 342.95255,37.927287 330.76068,28.913199 315.0491,23.882556 299.7369,23.909921 c 0,1e-6 0,0 0,0 0,0 -0.0245,-5.4e-5 -0.0245,-5.4e-5 z" id="rect4144-7" inkscape:original-d="m 284.47535,-58.993465 55,0 0,50 -55,0 z" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/>
            <path style="opacity:1;fill:#71a000;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 392.96591,16.442353 c 10.03817,11.543669 17.94864,24.878765 23.24846,39.342322 6.84795,18.789071 8.99063,39.009736 6.25653,58.780935 l -49.49355,-6.83725 c 1.59852,-11.591881 0.29923,-23.813686 -3.72635,-34.784364 -3.12585,-8.596667 -7.96224,-16.720583 -14.02621,-23.708779 z" id="rect4144-5" inkscape:original-d="m 339.47535,-58.993465 55,0 0,50 -55,0 z" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/>
            <path style="opacity:1;fill:#00af00;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 422.4709,114.56561 c -0.74997,5.42326 -1.86687,10.8127 -3.35425,16.1295 -3.84086,13.45257 -9.84379,26.00537 -17.53938,37.24306 l 0,10e-6 c -8.799,12.8003 -19.3906,23.82965 -30.99491,33.05095 l -31.2373,-39.0414 c 8.1988,-6.62332 15.43364,-14.02967 20.92463,-22.18195 l 10e-6,-1e-5 c 4.80319,-7.08854 8.53785,-14.7868 10.73457,-22.67944 l 0,0 c 0.87809,-3.04605 1.5346,-6.17831 1.97308,-9.35797 z" id="rect4144-35" inkscape:original-d="m 394.47535,-58.993465 55,0 0,50 -55,0 z" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/>
        </g>
<!--cut out-->
</svg>

Tested with: Browser / Version: Firefox Nightly 200827 (🦎 81.0a1-20200820093209) , Firefox Nightly 82.0a1 (2020-08-27) Operating System: Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density), Windows 10

Moving to Needsdiagnosis for further investigation.

[karlcow]

The SVG is inserted with an object element

<object type="image/svg+xml" data="/assets/scoremeter.svg" class="svgs" id="scoremeter"></object>

displaying directly the svg https://eerlijkdilemma.op.vpro.nl/assets/scoremeter.svg

shows that only Safari seems to get it right. Both Chrome and Firefox have a weird positioning.

The needle is drawn by

<g
  xmlns="http://www.w3.org/2000/svg"
  id="scoremeter"
  inkscape:transform-center-x="-31.822267"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  inkscape:transform-center-y="27.368813"
  transform="matrix(0.95955567,0.28151894,-0.28151894,0.95955567,40.285192,-80.411248)"
  transform-origin="-32 27"
>
  <path
    inkscape:transform-center-y="15.819469"
    inkscape:transform-center-x="-37.426842"
    sodipodi:nodetypes="cccc"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    inkscape:connector-curvature="0"
    id="path4205"
    d="m 389.08618,141.66247 -97.9817,-46.30033 c -1.60588,2.92475 -2.37549,10.62112 4.32449,13.27489 z"
    style="
      fill: #b3b3b3;
      fill-rule: evenodd;
      stroke: none;
      stroke-width: 1;
      stroke-linecap: butt;
      stroke-linejoin: miter;
      stroke-miterlimit: 4;
      stroke-dasharray: none;
      stroke-opacity: 1; 
    "
  />
  <path
    inkscape:transform-center-y="16.113878"
    inkscape:transform-center-x="-36.518331"
    sodipodi:nodetypes="cccc"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    inkscape:connector-curvature="0"
    id="path4205-2"
    d="M 389.07955,141.65658 290.99428,95.471382 c 1.22158,-3.104954 5.73429,-7.675721 13.35966,-4.839738 z"
    style="
      fill: #cccccc;
      fill-rule: evenodd;
      stroke: none;
      stroke-width: 1;
      stroke-linecap: butt;
      stroke-linejoin: miter;
      stroke-miterlimit: 4;
      stroke-dasharray: none;
      stroke-opacity: 1;
    "
  />
</g>

which deals with very small units. I would not be surprised it was a case of rounding issues.

[karlcow]

@birtles what do you think? Could it be https://bugzilla.mozilla.org/show_bug.cgi?id=1395350

[birtles]

The app is actually setting different values for transform depending on if you use Chrome or Firefox.

In Firefox you end up with the needle positioned as:

<g id="scoremeter"
  transform="matrix(-0.14986,-0.98871,0.98871,-0.14986,246.0889833755502,411.6028971824343)"
  transform-origin="-32 27">

But in Chrome it will be set as:

<g id="scoremeter"
  transform-origin="-32 27"
  style="transform: matrix3d(0.230598, -0.973054, 0, 0, 0.973054, 0.230598, 0, 0, 0, 0, 1, 0, 133.514, 368.86, 0, 1); transform-origin: 0px 0px 0px;">

If you take the source of these two, they will render the same in both Firefox and Chrome. That is, the first will be mis-positioned and the second will be correctly positioned.

However, for some reason the app is applying the transform using a style attribute in Chrome but a presentation attribute in Firefox. But what's more important is that when it decides to set the style attribute, it also sets transform-origin: 0px 0px 0px and that is what "fixes" it. Without that, the transform-origin="-32 27" applies and causes it to be misaligned it seems.

So the next step is to work out why the app is deciding to use inline style for Chrome, but not Firefox.

[karlcow]

Ah! Thanks. indeed.

User agent sniffing? In Firefox with a chrome user agent. https://imgur.com/a/GPzGY8a

        var scm = document.getElementById( 'scoremeter' );
        scm.addEventListener( 'load', function () {
            //console.log( 'svg load');
            var m = scm.contentDocument;
            var el = m.getElementById( 'scoremeter' );
            var trot = -230 + score * 7.6; // (maxscore=30 /230)
            tl.add( TweenLite.fromTo( el, 8,
                        { rotation: -230, svgOrigin: '300px 100px' },
                        { rotation: trot, svgOrigin: '300px 100px', ease:  Elastic.easeOut.config( 1, 0.4 ) },
                        'score'
                    )
                );
            tl.add( 'repeat' );
            // repeat schommelen
            tl.add( TweenLite.to( el, 1,
                        { rotation: trot+5, svgOrigin: '300px 100px', ease:  Power1.easeInOut }
                    )
                );
            tl.add( TweenLite.to( el, 1,
                        { rotation: trot, svgOrigin: '300px 100px', 
                            ease:   Power1.easeInOut,
                            onComplete: function () { tl.play( 'repeat' ); } }
                    )
                );
        });

the interesting part if that both in chrome and firefox when you request directly the SVG you get the same file. Oooh firefox search in devtools was broken and didn't send me the right results. I was looking for matrix3d found it through network search.

It's in: https://eerlijkdilemma.op.vpro.nl/node_modules/gsap/src/minified/TweenMax.min.js

This function Ra = (R.set3DTransformRatio = R.setTransformRatio = function (a) {}

inside this function there are two calls one for tramsform, one for style attribute. The code is obfuscated, but this is definitely user agent sniffing as I get the correct result for firefox with chrome UA.

ah this is where the difference is done.

                  n &&
                    (d._transformType =
                      (C.svg && za) || (!m && 3 !== this._transformType)
                        ? 2
                        : 3),

._transformType is 2 or 3.

[birtles]

TweenMax/TweenLite is from GreenSock. Can you tell if the UA-sniffing affects the GreenSock library? If so, we can reach out to them, they're quite responsive.

[birtles]

For the site patch, simply dropping the 'transform-origin' attribute might fix it (since the initial used value of that should be '0 0' for SVG elements).

[karlcow]

And the code is https://github.com/greensock/GSAP and probably @jackdoyle can help with this issue in between firefox and chrome for transform vs style.

The version used on the site is

/*!
 * VERSION: 1.19.0
 * DATE: 2016-07-14
 * UPDATES AND DOCS AT: http://greensock.com
 * 
 * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
 *
 * @license Copyright (c) 2008-2016, GreenSock. All rights reserved.
 * This work is subject to the terms at http://greensock.com/standard-license or for
 * Club GreenSock members, the software agreement that was issued with your membership.
 * 
 * @author: Jack Doyle, jack@greensock.com
 **/

I wonder if the issue would reproduce with a more recent version of the code. The latest version is 3.5.1

[jackdoyle]

I would definitely recommend updating to the latest version of GSAP. It's smaller, more modern, and has a lot more features. We've come a long way since 2016. If you're still having trouble, shoot me a minimal demo and I'd be happy to take a peek.

Migration guide: https://greensock.com/3-migration (but honestly, most legacy code works great - we put a high priority on backwards compatibility).

[karlcow]

@jackdoyle Thanks! To be clear we are not the owners of the site. We are https://webcompat.com and we analyze broken sites in browsers so they can work anywhere based on user reports.

ok let's see This site belongs to tegenlicht.vpro.nl and they seem to have an English branch https://www.vprobroadcast.com/

Their contact information is E-mail: backlight@vpro.nl

@vpro is on github.

Maybe @mihxil can help us find the right person who would be able to upgrade the GSAP library for this SVG animation.

[mihxil]

I might.

[mihxil]

I think I've notified the correct people. We may decide to not fix it but rather switch off the entire site. It was developed 4 years ago as a 'short lived' project, and I doubt if we have the resources to actively start maintaining it again (actually the original developers don't even work with us any more). But we'll see what the stake holders are going to say.

[karlcow]

Thanks.

[denschub]

Based on what @mihxil wrote in September 2020, this site is no longer in active use (and thus probably expected to get low traffic), and it also is unlikely to receive a proper site-side fix. Our site patches are meant as temporary measures for high-traffic sites, so I'll untag this. :)