iOS: Display Zoom set to Larger Text causes contents to be cropped at edge of the display

[jhung]

Describe the bug

On iOS, if the Display Zoom setting is set to "Larger Text", the contents of the web page will be cropped at the edge of the display and not visible to the user.

The same setting will also cause margins to be reduced pushing text right to the edge of the display.

To Reproduce

Steps to reproduce the behavior:

1. Go to iOS settings and set "Display Zoom" to "Larger Text"
2. In Safari (or another browser) open https://idrc.ocadu.ca/projects/communication-access-within-the-accessible-canada-act/
3. Notice how the header text is clipped at the edge of the display, and how the margins in the body are gone (text is right up to the edge of the display).

Screenshots

Below: Header text clipped at edge of screen

Below: Body text pressed up against edge of screen

Smartphone (please complete the following information):

• iPhone 8 and iPhone SE
• OS: iOS
• Browser Safari

[chosww]

I tried to reproduce this issue on iPhone 8 Plus and couldn't reproduce it. iPhone 8 Plus does have larger screen size than iPhone 8 and iPhone SE, but appropriate padding was introduced even on larger text on my device. Perhaps this could been a Safari issue -- @jhung, could you try to reproduce this again and see if you can reproduce it?