search

seiyria / bootstrap-slider

A slider control for Bootstrap 3 & 4.
http://seiyria.github.io/bootstrap-slider/
Other
2.99k stars 1.14k forks source link

Slider not working properly with zoom property #625

Open leduyminh48 opened 8 years ago

leduyminh48 commented 8 years ago

When css zoom property is in effect and larger than 1, slider does not work

seiyria commented 8 years ago

As per our guidelines please provide a fiddle.

On Tue, Sep 6, 2016, 03:26 Minh Le notifications@github.com wrote:

When css zoom property is in effect and larger than 1, slider does not work

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/625, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2Yitwed___4JzQK1e2be2EqCfr7Rks5qnSOigaJpZM4J1lUv .

andrewspode commented 7 years ago

I'm also having this problem. No fiddle required - just go to the demos page:

http://seiyria.com/bootstrap-slider/

Open a console and put in "document.body.style.zoom = 1.5" and the handles pick up areas aren't scaling with it. This means you have to select in a different position and as you move, it doesn't move in relation to the mouse.

andrewspode commented 7 years ago

So I did a little debugging/reading. From what I've read the mouse coordinates are given for the unzoomed page, which is obviously not inline with what is being rendered.

Inside the _getPercentage function, after eventPosition is defined, I added this:

//offset for zoom if (document.body.style.zoom !== "" && document.body.style.zoom !== 1) { eventPosition = eventPosition / document.body.style.zoom; }

That seems to have fixed it for me - sorry I don't have time to properly fork and commit.

JnMik commented 5 years ago

I just read that zoom property should not be used as this is deprecated. use css3 instead. Careful not to have fixed element inside your transformed wrapper as this break fixed css position.

transform: scale(0.X) .
transform-origin: 0 0;

Bootstrap slider is working fine with transform.

utilmind commented 2 years ago

I just read that zoom property should not be used as this is deprecated. use css3 instead. Careful not to have fixed element inside your transformed wrapper as this break fixed css position.

transform: scale(0.X) .
transform-origin: 0 0;

Bootstrap slider is working fine with transform.

It looks fine visually with any scale, but slider does not moving properly with mouse or touch. The click point does not match the position of the slider.

To reproduce this bug, set transform: scale(N) style to the slider container (N should be different than 1).

The bug fix in following Pull request solving the issue: https://github.com/seiyria/bootstrap-slider/pull/974