James Reggio jamesreggio

Keyboard inset adjustment double-counts toolbar height in `WKWebView` or `UIScrollView`

Since iOS 7, the navigation bar and toolbar[0] in a UINavigationController are designed to render atop the content of the current UIViewController. In order to prevent these bars from occluding the contents of the view, UINavigationController will (under certain conditions) automatically reach down the view hierarchy and adjust the insets of the primary UIScrollView, such that the content is padded by the height of these bars.

The system keyboard is also designed to occlude the bottom half of the screen by default. In most cases, this is undesirable, so the app developer is expected to subscribe to NSNotificationCenter keyboard events and adjust the UIScrollView insets themselves.

WKWebView automatically subscribes to th

In the process of evaluating the suitability of SFSafariViewController (SFSVC) for use within the Twitter iOS client, I encountered a number of bugs with differing severities, all of which I filed as Radars in Apple's bug reporting tool. Here is my attempt to holistically document their impact on our ability to adopt SFSafariViewController as a replacement for our existing WebViews.

Highest Severity

The fundamental blocker is Radar

	<!--
	This Gist illustrates a bug in the latest version of Ractive.js (0.3.7).
	Download and open this file on your local machine to view the repro.

	When an array is shared between the root Ractive view model and a
	component (Child), the array's `_ractive.roots` cache will originally contain
	`[Ractive, Child]`. However, when the array is modified from within the child,
	the cache is reconstructed in the opposite order: `[Child, Ractive]`. It is
	unclear whether this difference in ordering is itself a bug, or whether it
	just happens to surface a bug in other code.


	<html>
	<head>
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://fb.me/react-0.5.1.js"></script>
	<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
	</head>

	<!--
	This Gist demonstrates how to use an invasive jQuery plugin (UI Sortable) with
	the latest version of Ractive.js (0.3.7).

	It was built as an analogue to https://gist.github.com/petehunt/7882164, which
	illustrates how to pair jQuery UI Sortable with React. I would contend that
	Ractive.js plays more nicely with this plugin.

	The key takeaway from this exercise is that you must not allow a third-party
	plugin (e.g., jQuery) to change the DOM in a manner that its structure no

	// This script will probe for links on a page that may not function correctly
	// inside of a WebView control. These 'bad' links are identified by their use
	// of window.open, which has undefined behavior in a single-window environment.
	//
	// To use the script, copy-paste the entirety into the console of a browser.
	// (I've tested exclusively in Chrome.) Emulating a mobile user-agent may help
	// to reduce the occurrence of false-positives.
	//
	// The script will simulate a click upon all matching selectors. It does its
	// best to suppress navigation and other side-effects; however, this is not

	// This script will help to diagnose popup blocker issues.
	// Copy-paste it into your console, or include it in your development build.
	//
	// When you make a call to window.open(), this script will check whether the
	// most recent user input event happened on the same tick. (If not, a
	// breakpoint is triggered and an explanation is written to the console.)
	//
	// You can manually call window.debugOpen() at any time to determine the
	// whether it's safe to insert a call to window.open() in the current code.
	//

	// The underlying issue pertains to uninitialized memory and is inherently non-deterministic.
	// This will consistently reproduce for me using React Native 0.41.1 on iOS 9.3, but it will not reproduce on iOS 10.2.
	// If the app launches and does not immediately display a redbox with an error, the bug did not reproduce.

	import React, { Component } from 'react';
	import { AppRegistry, View } from 'react-native';

	export default class App extends Component {
	constructor() {
	super();

	import React, { Component } from 'react';
	import {
	AppRegistry,
	StyleSheet,
	FlatList,
	Text,
	View
	} from 'react-native';

	const ITEMS = 100;

	const contextLink = new ApolloLink((operation, forward) => {
	operation.setContext(context => ({
	...context,

	headers: {
	...context.headers,
	authorization: sessionId,
	},
	}));

James Reggio jamesreggio

Keyboard inset adjustment double-counts toolbar height in WKWebView or UIScrollView

Highest Severity

Keyboard inset adjustment double-counts toolbar height in `WKWebView` or `UIScrollView`