JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YUI 3.4 iPad Bug?</title>
</head>
<body class="yui3-skin-sam">
<p>
On an iPad this issue exists. Not so on other browsers AFAICT.
</p>
<p>
On other browsers you will see 4 messages logged in the console. On iPad the <code>after show</code> message is <em>not</em> logged and an error is thrown.
</p>
<p>
The error message indicates a <code>TypeError</code> on line 122 of <code>yui.js</code>:
</p>
<p><blockquote><code>el.addEventListener(type, fn, capture);</code></blockquote><p>
<p>
Which seems to relate to registering the <code>resize</code> and <code>scroll</code> events for the widget instance.
</p>
<div id="overlay">
<div class="yui3-widget-hd">Header</div>
<div class="yui3-widget-bd">Body</div>
<div class="yui3-widget-ft">Footer</div>
</div>
</body>
</html>
CSS
body {
font-family: sans-serif;
}
.yui3-overlay {
background-color: white;
border: 1px solid black;
padding: 3px;
}
p {
margin-bottom: 1em;
}
blockquote {
margin-left: 2em;
}
JavaScript
YUI({ filter: 'RAW' }).use('overlay', 'console', 'event-base', 'dd-plugin', function(Y) {
Y.on('domready', function() {
var console = new Y.Console();
console.plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] });
console.render();
var overlay = new Y.Overlay({
srcNode: '#overlay',
bodyContent: '<a href="#" id="click-link">Click me!</a>',
visible: false,
render: false
});
overlay.plug(Y.Plugin.Drag, { handles: ['.yui3-widget-hd'] });
Y.log('before render');
overlay.render();
Y.log('after render');
Y.log('before show');
overlay.show();
Y.log('after show');
});
});