Newsroom Update

New features come to Apple services this fall. Learn more >

Zoom css not works on Safari (iOS 17.4.1)

I have a website using zoom css https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

I have a div has big content inside a div with overflow css. On chrome, adge, etc.. works as expected. But in safari overflow div has broken.

  • This is on Chrome

  • This is on safari, it still zoom but the layout has broken:


[Re-Titled by Moderator]

iPhone 5s

Posted on May 23, 2024 9:54 PM

Reply
3 replies

May 24, 2024 5:52 AM in response to tuankiet116

tuankiet116 wrote:

Of cause, I have change to scale but zoom still a very useful css attribute. And I have tested on Chrome on Iphone too and I have faced with the same error. May be it is a bug on Iphone.


All browsers on iOS and iPadOS are based on WebKit, though that is changing starting with 17.4.


In general…


Use a proper subset of the HTML and CSS standards with functional support for your target browsers and platforms.


Avoid non-standard extensions until and unless you have reason to increase parallel development and testing costs, or until and unless the necessary extensions are widely and well-supported on and preferable beyond your target browsers and platforms.


Identify which browsers your most important (however you categorize that) users are using, and target your support and your compatibility testing for those browsers. MSIE might most charitably be considered unsupported and problematic for instance, but if the bulk of your most profitable customers are hypothetically still using that browser (as one website I’ve dealt with had measured and discovered), you best (hold your proverbial nose and) support that browser well.


Use validators for CSS and HTML, whether W3C or otherwise. Verify your code follows web standards, and only diverges where strictly necessary.


Beyond the HTML and CSS basics, if your best customers are not all on 5G and gigabit links, run performance and network simulators that can test with bandwidth-restricted or buggy networks, if your best customers are using those. That testing matrix might include Starlink (which has latency spikes and packet losses when switching satellite routes every ~fifteen seconds or so), as well as marginal mobile networks with drop-outs, if those networks are where your best customers are located.


Conversely, if your best customers are all on 5G and gigabit links, you can have more headroom available for inefficiencies, higher resolutions and enormous backgrounds, ever-bigger frameworks or downloads (one of the biggest), and the usual web gewgaws de jour.

Zoom css not works on Safari (iOS 17.4.1)

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.