Update: I recently discovered that Apple quietly prohibits fixed-size iframes in iOS. How frustrating! What can be done to make an IFrame responsive in iOS Safari?
I am facing a seemingly straightforward task: embedding a fixed-size <iframe> within an absolutely-positioned div.
This scenario is happening on WKWebView on an iPad.
Despite all my efforts (and trust me, I've tried everything), the iframe refuses to comply with the specified size and instead auto-adjusts its height according to its content.
All I want to know is how to override this behavior.
Here are the CSS attributes extracted directly from Safari while connected to the iPad:
https://i.sstatic.net/SsWT9.png
The <iframe> element itself has its height and width attributes configured with specific values as well:
https://i.sstatic.net/rXeAF.png
However, as indicated by the Computed view, it completely disregards any attempts to set its height and ends up appearing like this:
https://i.sstatic.net/vk8Tt.png
What exactly is happening here? This issue is causing my web app to extend far beyond the intended screen boundaries. It's been a struggle for over an hour now, and I have not made any progress at all.