Steppers don't work properly when panel is zoomed about tweakpane

[felixakiragreen]

Hey @cocopon !

Fantastic library, thank you for all the work you've put into this!

Just wanted to drop a note letting you know that zoom is broken again for sliders. But, it's not a big issue, so that's why I didn't create a new issue for it.

I have pretty bad eyesight, so I wanted to make my tweakpane 150% bigger. After zoom not working, I tried transform scale, which does work, but messes up the layout of my page. I dug into the theming and found --tp-blade-unit-size but that only adjusted the height, not the text size.

Leaving this here in case it's helpful for anyone else:
I was able to get everything to a nice place by using these styles:

<style>
	:root {
		--tp-blade-unit-size: 24px;
	}
	.tp-rotv {
		font-size: 14px !important;
	}
	.tp-lblv_v {
		min-width: 50% !important;
	}
</style>

[cocopon]

But if you going to use this don't forget to set transform-origin: top right;

Yes, that behavior is by design.

Another downside of using transform: scale() is that empty space appears at the bottom of every folder - https://www.screencast.com/t/PhOyB3H9

This seems a bug that should be fixed so I created a issue about this: #31

[vforsh]

@cocopon Fixed, works like a charm. Thank you!

[cocopon]

zoom is non-standard feature: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

For example, Firefox doesn't support this property:
https://caniuse.com/#feat=css-zoom

This problem causes because getBoundingClientRect() (used in PointerHandler) returns a value that isn't applied zoom. This behavior has been already reported to each bug tracker several years ago but has not been fixed yet:

• https://bugs.webkit.org/show_bug.cgi?id=77998
• https://bugs.chromium.org/p/chromium/issues/detail?id=967097

Maybe I can add a workaround for this problem, but I'm worried about doing it because:

• This property isn't standard
• So it may change the behavior in the feature

How about using transform: scale(1.5) instead of zoom: 1.5 ?

[vforsh]

Thanks for quick reply.

Yes, steppers work with transform: scale(1.5) so it could be a quick workaround. But if you going to use this don't forget to set transform-origin: top right; otherwise you will have to adjust position panel manually by setting top and right. With zoom it was fine.

Another downside of using transform: scale() is that empty space appears at the bottom of every folder - https://www.screencast.com/t/PhOyB3H9

[cocopon]

@vforsh Fixed a bug #31 in the latest release 1.3.1. Please try it!