Web page bug only shows up on an iPhone

Question

Level 1

7 points

Web page bug only shows up on an iPhone

I have a vertical space bug on several of my web pages, if viewed from an iPhone in portrait mode. I can't diagnose it with Chrome dev tools or Firefox dev tools because their iPhone emulation does not show me the bug that I can see on my iPhone (portrait mode). Much of the advice I have found online is advising me to look at the site from a Mac. But, I don't own a Mac. Is there a web developer here who could spare a moment to look?

The page link is here ... https://keithpurtell.com/jack-vance.php

If you look at it from Safari with the Developer tools turned on (portrait mode), please scroll down to the embedded YouTube video, and note the large gap between the video and the paragraph above. I can't tell if that is margin, or padding, or something else? Line height?

(This will not be visible if you are looking in normal desktop mode.)

iPhone 5c, iOS 10

Posted on Oct 10, 2023 11:30 AM

Reply

Answer 1

Top-ranking reply

Urquhart1244

Level 10

146,316 points

Oct 10, 2023 1:24 PM in response to okieseeker

The figure tag around the iframe with the video, doesn't need the aspect-ratio attribute. It will match the content within automatically. Without it, the page renders fine for this box.

Not sure why the box renders with the enormous height in Safari, if the aspect-ratio attribute is included.

Reply

Answer 2

Urquhart1244

Level 10

146,316 points

Oct 11, 2023 1:42 AM in response to okieseeker

I'm very glad you responded!

Was this something you diagnosed because you have a Mac?

I saw this extra space on your webpage in iPhone iOS 17.0.3 (Safari 17.0.1) and also on Mac macOS Sonoma 14.0 (Safari 17.0). The Safari Web Inspector on Mac gave details on the box model used here, and indicated that the figure wrapper has the extra hight on the top side. The Web Inspector in this browser allows CSS properties to be turned off (temporarily ignored) individually through checkboxes. Unchecking aspect-ratio removed the extra space. I couldn't determine how that height was calculated though. I’m not seeing the logic of how WebKit (the render engine) went from 16/9 to extra height.

Reply

Answer 3

okieseeker Author

Level 1

7 points

Oct 10, 2023 4:07 PM in response to okieseeker

I am pasting in part of an analysis of what happened. This may get deleted by Apple moderators, because it came from Google Bard, and one tech website I know of has banned AI tech analysis.

The reason you are seeing about 400px of empty space above the figure element when you use the aspect-ratio property is because the figure element has a default vertical-align property of baseline. This means that the bottom of the figure element will be aligned with the baseline of the surrounding text.

When you set the aspect-ratio property on a figure element, you are telling the browser to keep the width and height of the figure element in a specific ratio. However, the aspect-ratio property does not affect the vertical alignment of the figure element.

This means that if the figure element is taller than the surrounding text, the bottom of the figure element will still be aligned with the baseline of the surrounding text. This will create empty space above the figure element.

To fix this problem, you can set the vertical-align property on the figure element to top. This will tell the browser to align the top of the figure element with the top of the surrounding text.

--Google Bard

Reply

Answer 4

Urquhart1244

Level 10

146,316 points

Oct 11, 2023 1:52 AM in response to okieseeker

This means that if the figure element is taller than the surrounding text, the bottom of the figure element will still be aligned with the baseline of the surrounding text. This will create empty space above the figure element.

I’m not seeing “surrounding text” on your page though. There are paragraphs above it and below it, but the video doesn’t seem nested inside a text block. Or am I missing something from this author’s argument?

Reply

Answer 5

okieseeker Author

Level 1

7 points

Oct 10, 2023 1:33 PM in response to Urquhart1244

That seems to have solved it! This is the first time I have encountered a very obvious bug that only displayed in one specific setting. I tried Googling vertical space issues in association with aspect-ratio, but no results. The previous gap on top of the video figure was at least 400px tall. Also, I had tried installing Safari for Windows 5.1.7 on my PC but ran into a new set of problems.

Urquhart1244, I'm very glad you responded!

Was this something you diagnosed because you have a Mac?

Reply

Answer 6

okieseeker Author

Level 1

7 points

Oct 11, 2023 12:10 PM in response to Urquhart1244

Normally, the dev tools in Chrome or Firefox would show me that kind of detail. For unknown reasons, in this one instance, the Chrome/FF rendering of how the page displayed on iPhone did not show the extra space. This was a real annoyance for me, until this Apple forum.

Reply

Answer 7

Urquhart1244

Level 10

146,316 points

Oct 11, 2023 1:02 PM in response to okieseeker

I liked the article too. I started reading when I joyfully noticed that a Bookpilled video was included.

Reply

Answer 8

okieseeker Author

Level 1

7 points

Oct 11, 2023 1:42 PM in response to Urquhart1244

Cool!

Reply

Answer 9

okieseeker Author

Level 1

7 points

Oct 11, 2023 12:14 PM in response to Urquhart1244

I have for now accepted the logic, mostly because I already know my tools are inadequate to make a deep dive into this one odd glitch. This was one of the most time-consuming troubleshooting events of my career.

Reply

Web page bug only shows up on an iPhone

Similar questions