bug: v4 ion-range should consider document ZOOM value

[acobre]

Ionic version: [x] 4.x

Current behavior: When sliding the ion-range slider with the document zoom (CSS property) scaled to a value different to 1.0 (i.e. 0.4) the slider dosen't follow the finger

Expected behavior: The drag event should consider the document zoom to correctly calculate the drag distance.

[liamdebeasi]

Thanks for the issue. Are you trying to scale the ion-range element? If so, you should be using transform: scale(2) rather than zoom: 2.

[acobre]

Hi, in my case this solution isn't applicable because the scale is applied to document to fit the view on different screen sizes. The transform css property produces different result. Having said that, the transform seems to work. The ZOOM property continue to cause problems.

[liamdebeasi]

Thanks for the follow up. Can you provide an example of how transform produces a different result in your app? I have a CodePen here and the results seem pretty similar: https://codepen.io/liamdebeasi/pen/vYYzMag

The main difference here is that scale does not modify the box sizing of the element. zoom is non-standard and not on the standards track, so we typically do not recommend using it in production apps: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

[acobre]

Sorry, our project is an Ionic App. I can provide a screenshot of this behavior.

[acobre]

The Gray Circle is the mouse position:

As you can see this happens when the document zoom is set. More is the zoom more is the wrong range position:

[liamdebeasi]

Thanks for the follow up. I understand that zoom is not working correctly with ion-range. I am mostly interested in why transform: scale is not something that can be used instead of zoom in the use case of your application. The zoom property is not something that is standard, so the behavior is likely to either be inconsistent or unsupported across browsers.

[acobre]

Sorry but I don't agree. Zooming pages in a browser is a standard behaviour that a web application should handle. We are also using body zoom to perfecly scale complex applications faithfully respecting the original layout and it works perfectly with others components like ion-slides (touching, dragging etc.).

We are currently using Mobiscroll components and the body zoom factor doesn't impacts in the touch events of the various component including horizontal item list swiping or similar.

[liamdebeasi]

Thanks for the follow up. I definitely agree that users should have a way to zoom the page in ways that both affect and do not affect the layout.

When you do not want to affect the layout, the recommended way is to use transform: scale.

In your scenario, it sounds like you want to affect the layout. In that case, it is recommended to use the zooming/accessibility tools that the browser or operating system provides. (For example, Chrome lets you zoom a page using Ctrl +/-). This provides a consistent user experience that your users are able to control.

For things like the Accessibility features on iOS, Ionic does not provide adequate enough support for those, and this is something we are working on improving; however, I do not think adding one-off support for zoom in a component is the correct solution here for the reasons I mentioned previously. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.