<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Display problem with WebKit browser and iOS device"
href="https://bugs.webkit.org/show_bug.cgi?id=163388">163388</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Display problem with WebKit browser and iOS device
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iPhone / iPad
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.3
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>WebKit Misc.
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>josephelfelt@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>This issue affects all Google map links that are displayed on iOS devices using the Facebook or Twitter mobile app and the WebKit browser that is part of those mobile apps.
Here is a link to a simple demo map created by Google:
<a href="https://developers.google.com/maps/documentation/javascript/examples/full/map-simple">https://developers.google.com/maps/documentation/javascript/examples/full/map-simple</a>
Steps to reproduce problem
1. Post the above link on Facebook or Twitter
2. Use an iPhone or iPad along with the Facebook or Twitter mobile app to look at the above map.
The problem is with the WebKit browser that is part of those mobile apps. The WebKit browser renders the map with too much height for the usable portion of the screen. As a result, part of the map is rendered off screen. You do not see the word “Google” in the lower left corner. You do not see the minus sign for zooming out or the Google copyright notice.
In the WebKit browser that Facebook is using for iOS devices, the value for window.innerheight is too large. That variable is mistakenly set to the full screen height instead of being set to the writeable screen height that can be used by whatever webpage is being displayed.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>