iPad OS (v13 - Latest) broke CSS Zoom

In iPad OS safari, when adding the zoom attribute to the body element the text is not adjusting, but staying the exact same size when the zoom is at 100%.


This functionality used to work in previous iOS versions for iPad, and it currently works for iOS 13 on iphone and the latest version of mojave and Catalina for mac. Does anyone know if this is a bug or hidden setting on the iPad or experienced the same issue?


LINK TO TEST SITE (to see issue access via iPad): http://alleetest.s3-website-us-east-1.amazonaws.com/

Up vote post of leerob97 Down vote post of leerob97
2.3k views
Posted by
leerob97
Reply
Add a Comment

Replies

IMPORTANT,


For anyone following or coming across this issue, I have discovered a bug with Safari. The problem is Apple is not correctly scaling text when the page is magnifyied when using the css zoom attribute. For example, if I have an element with font-size: 20px and set the zoom to 50% instead of scaling to 10px Apple is actually setting the font-size to 40px and so on for 60%, 70%...


Safari is only having this problem on iPad OS 13 and newer. To simply see this just console.log() the font-size of whatever element after each zoom change and you can see the font actually change from 20px to 40px.


MY SOLUTION:


This is probably not the most efficent solution, but whatever the scale is I do scale * scale then multiply that to the font that needs to be adjusted! I hope this is fixed soon!

Posted by
leerob97
Up vote reply of leerob97 Down vote reply of leerob97
Add a Comment