Sudden increase/decrease in scaling on certain level of zoom percentages | Client-first Fluid Responsive

I’ve implemented the fluid responsive solution on a project. It’s working as intended however on certain levels of zoom percentages, the scaling is abrupt.

E.g., on a 14-inch screen, when zoomed in and out between 80% to 90%, the change is very drastic compared to other zoom levels on other screen sizes.

Similarly, on a 16-inch screen, it happens between 100% - 110%

And on a 27-inch screen, it happens between 125% - 150%.

I’ve also tried disabling and enabling the “Stop scaling at max breakpoint” option in the tool but that isn’t working as well.

I know it’s a very niche problem but it was pointed out to me by the client and I am not sure what the issue is here.

Here are relevant details:

Hi @Support-Luis, any possible solution to this issue?

Hello @niranjay_30, I believe the issue is related to the defined breakpoints in the responsive design. Responsive designs typically use CSS breakpoints and media queries to adapt the layout and design based on different screen sizes. However, certain zoom levels may not be adequately covered by the existing breakpoints, leading to abrupt scaling changes during transitions.

Our client-first library focuses on handling the most common breakpoints, but it’s essential to be aware that zooming can sometimes trigger a breakpoint that might not be typical for regular users. While we can make efforts to address this behavior, achieving pixel-perfect fluid responsiveness under all scenarios can be challenging due to the complex nature of browsers and user settings.