safari not rendering web page correctly

I’ve built a webpage, it displays correctly on some devices but on others it does not. For those not familiar with css the result here should show orange boxes but on my phone it does not. In my old phone it does, it’s the same in chrome, edge, Firefox which will use safari rendering engine I believe.


I’ve had the css chdcked and it’s correct, my phone is up to date. How can I force an update to my browsers?


im not sure what the issue is so don’t know how many users are or would be impacted


https://codepen.io/kodee/pen/OJdpezJ

iPhone 6, iOS 12

Posted on Nov 10, 2023 1:56 PM

Reply
Question marked as Top-ranking reply

Posted on Nov 10, 2023 3:45 PM

Is this on ↓: ?

iPhone 6, iOS 12

iOS 12 (2018–2019) has an older version browser (Safari 12), with somewhat different behavior. Support for some CSS properties came later.


… chrome, edge, Firefox which will use safari rendering engine I believe.

They do not. They each have their own rendering engine.


I’ve had the css chdcked and it’s correct

CSS Validator says: 2 issues found:

• Property “container-type”: “inline-size” ← Supported for Safari 16 or later/Chrome 105 or later/…

• Property “grid-template-rows”: “subgrid” ← Supported for Safari 16 or later/Chrome 117 or later/…


How can I force an update to my browsers?

You can’t. The OS version puts limits on the browser versions. Besides, you have no control over the devices and software versions of your visitors.


… don’t know how many users are or would be impacted

Safari 15 or earlier, Chrome 116 or earlier, etc. …

See the ‘Browser compatibility’ listing for each property on the developer.mozilla.org site [1] [2].

Similar questions

2 replies
Question marked as Top-ranking reply

Nov 10, 2023 3:45 PM in response to Kiwis80

Is this on ↓: ?

iPhone 6, iOS 12

iOS 12 (2018–2019) has an older version browser (Safari 12), with somewhat different behavior. Support for some CSS properties came later.


… chrome, edge, Firefox which will use safari rendering engine I believe.

They do not. They each have their own rendering engine.


I’ve had the css chdcked and it’s correct

CSS Validator says: 2 issues found:

• Property “container-type”: “inline-size” ← Supported for Safari 16 or later/Chrome 105 or later/…

• Property “grid-template-rows”: “subgrid” ← Supported for Safari 16 or later/Chrome 117 or later/…


How can I force an update to my browsers?

You can’t. The OS version puts limits on the browser versions. Besides, you have no control over the devices and software versions of your visitors.


… don’t know how many users are or would be impacted

Safari 15 or earlier, Chrome 116 or earlier, etc. …

See the ‘Browser compatibility’ listing for each property on the developer.mozilla.org site [1] [2].

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

safari not rendering web page correctly

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