2

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/

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
5
  • thank you for you confirmation. I have wrote a script that does as what you have described, unfortunately I have some pages with numerous and nested elements therefore slowing down the rendering of the page. I have contacted Apple support about this issue, and have not received any response on if this will be fixed or if I need to just use my workaround for this.
    – leroyjenkinss24
    Commented Jan 20, 2020 at 20:52
  • I would file the bug at bugs.webkit.org as I didn't see it listed there (unless I just didn't find it). it will most likely get better attention there than Apple Support.
    – RyDev
    Commented Jan 21, 2020 at 18:03
  • Awesome, I created a report: bugs.webkit.org/show_bug.cgi?id=206550
    – leroyjenkinss24
    Commented Jan 21, 2020 at 20:52
  • @leroyjenkinss24, does the issue still exist?
    – Rikesh Subedi
    Commented Jun 4, 2020 at 9:19
  • @RikeshSubedi For me the issue still exists on iPadOS. They have not fixed it yet.
    – RyDev
    Commented Jun 17, 2020 at 21:58
0

Solution:

function setTransformScale(scaleFactor) {
    if(!scaleFactor) scaleFactor = 1;

    let height = $(window).height()*(1/scaleFactor);
    let width = $(window).width()*(1/scaleFactor);

    $(".body-container").css({
        width: width+"px",
        height: height+"px",
        transform: `scale(${scaleFactor})`
    });
};

I have completely removed the CSS Zoom property from my site and switched to transform: scale() property. To counter the spacing I added "transform-origin: top left" to my css file and in javascript I run my created function when sizing pages.

$(".body-container") is my div element right below the body tag causing the zoom effect on my entire page.

Improve this answer
2
  • How does removing CSS Zoom effect from your website address the issue of CSS Zoom not working on the iPad with iOS v13.x. This seems it will only work in one very specific scenario.
    – Allan
    Commented Mar 2, 2020 at 23:16
  • The issue with the actual CSS Zoom on iPad OS remains. Due to lack of response from apple, I had to come up with my own solution (described above). This solution produces the same results as if CSS Zoom still worked accordingly.
    – leroyjenkinss24
    Commented Mar 3, 2020 at 14:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .