I have discovered a bug in Safari with iPad OS. The problem is that when I zoom using the css zoom attribute, safari is taking an element's font-size and is either enlarging or shrinking based on the zoom level.
Example: If I have an element with font-size: 20px at 100% and zoom to 50%, safari is making the font-size now 40px keeping the element at 100% therefore breaking my layout. This only occurs only on devices running iPad OS. (This happens at all zoom levels 50%, 60%, 70%, etc.)
Does anyone have any extra information on iPad OS that may help me solve this problem? I have already reported to Apple, but it has been a while since I have had any status update.
LINK TO TEST: http://alleetest.s3-website-us-east-1.amazonaws.com/
Best Answer
I see your issue. Unfortunately, I have noticed that Apple has broken several aspects of webpage rendering on iPadOS, leaving several minor visual quirks that didn't exist in Safari 12 for iPad.
Although it is very annoying that they broke Safari, unfortunately, we have to live with it in the meantime. What I would do is create a script that will increase and decrease the size of the elements, text, borders, etc. when you change the "zoom" size. Doing this would also give support for the Firefox browser, as it doesn't have support for the CSS zoom.
This suggestion might not be ideal, depending on what you are trying to do, but hopefully, this helps somewhat.
Also, it should be noted that the iPadOS Safari browser's built-in zoom feature using a keyboard will work correctly, just not the CSS zoom.