scale not appearing correctly on Safari

[mcdonaldajr]

works fine on Chrome. Error appears on Safari on Mac and iPhone.

[colinl]

I am not particularly surprised. Safari has problems with lots of stuff. There is nothing I can do about it, you will have to use a browser that supports modern javascript and CSS.

[mitchtimken]

I am seeing the same issue on multiple iOS browsers (Safari, Google Chrome, and Firefox). Works fine on PC as far as I am aware.

[colinl]

Works fine on PC as far as I am aware.

I don't understand why you have said 'as far as I am aware'. If you view the same node red server on a PC and on iOS with Chrome does the same gauge work ok when viewed on the PC and not on iOS?

If you open the browser developer tools console on iOS using Chrome do you see any errors reported?

Not having access to a machine running iOS it is difficult for me to debug.

[mitchtimken]

Sorry for poor phrasing. I just started testing with this node earlier today. When viewing the same node red server on a PC and on iOS with Chrome, the gauge works fine on PC with corresponding scale in the right spot. On iOS, the needle moves and the value is correctly displayed but the scale is not in the right spot (exactly what is shown in original post).

I opened browser developer tools console within Chrome on iOS and did not encounter any errors when viewing the dashboard and injecting test values to the gauge node. Within node red, I also tried re-deploying a few times and restarted node red but issue was still not resolved. I am not very comfortable with iOS myself but let me know if I can be of more assistance.

[colinl]

What version of chrome is it?

[mitchtimken]

Chrome Version 126.0.6478.153 (Official Build) stable (64-bit)

[colinl]

Well that is not the issue, I have an old Android tablet running Chrome 106 and it is fine. I have posted a question on the forum to see if anyone there has any suggestions.

[hotNipi]

Things to try

Currently for numbers the CSS applies like this

rotate: -48deg;
transform-origin: 50% 42.6667%;
transform: translate(50%, 42.6667%);

You may move the transform into one rule (not too far ago that was the only option)

transform-origin: 50% 42.6667%;
transform: rotate(-48deg) translate(50%, 42.6667%);

[colinl]

You may move the transform into one rule

Thanks, I will release a new version with that changed later today in the hope it helps.

@mitchtimken did you see the post on the forum, that in fact all browser on iOS are rendered using the Safari engine, explaining why they all have problems.

[colinl]

@mcdonaldajr, @mitchtimken I have released version 1.1.2 with simplified CSS, which might, or might not, make a difference with iOS. You should be able to install it via Manage Palette (you might have to refresh the browser page to see it). Then restart node red and refresh the browser page viewing the dashboard and see if it has helped.

[mcdonaldajr]

Mac running Safari - same problem. Note: tried it on Chrome on an iPhone, also didn’t work properly. Mac running Chrome- works as designed.



On 4 Jul 2024, at 11:19, Colin Law @.***> wrote:

@mcdonaldajr https://github.com/mcdonaldajr, @mitchtimken https://github.com/mitchtimken I have released version 1.1.2 with simplified CSS, which might, or might not, make a difference with iOS. You should be able to install it via Manage Palette (you might have to refresh the browser page to see it). Then restart node red and refresh the browser page viewing the dashboard and see if it has helped.

— Reply to this email directly, view it on GitHub https://github.com/colinl/node-red-dashboard-2-ui-gauge-classic/issues/5#issuecomment-2208625605, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7BWH3VQK5YRCYMGN26HGTZKUOSNAVCNFSM6AAAAABJ4EWAAWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMBYGYZDKNRQGU. You are receiving this because you were mentioned.

[hotNipi]

Here's the thing: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Safari & Safari on iOS

Only supported for transformations applied using the CSS transform property (e.g. .className { transform: rotate(45deg); transform-origin: center; }). It has no effect on transformations applied using the transform SVG attribute (e.g. <rect style="transform-origin: center;" transform="rotate(45)" />).

So what you maybe can do is to turn those transform related calculations into CSS variables and use them in the class for numbers.

[colinl]

OK, thanks, does that mean I will have to dynamically create a unique class for each number, along with the CSS for that class?

[hotNipi]

No. But it is not something I can explain without example but I'm away from computer for this weekend..

[colinl]

I am away for a few days too, so that is not a problem.