-
Notifications
You must be signed in to change notification settings - Fork 48
/
demo.html
117 lines (115 loc) · 4.19 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bug 2: Cross-origin iframe</title>
<style type="text/css">
html {
font-size: 100%;
}
input,
select {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container body-content">
<form>
<h2>Bug 2: Cross Domain iframe</h2>
<a href="index"><= Back to Bug 1</a><br />
<div style="margin: 1rem 0">
Instructions: Place focus on the first input below. This should hide
the iframe below the keyboard. Then scroll down to the input in the
iframe and select it.<br />
<br />
This bug is that you can't put the focus in the iframe input when the
iframe is offscreen with the keyboard open from a different field.
</div>
<button class="btn" id="btn-workaround--css">
Toggle CSS workaround</button
> <span id="span-workaround">Not applied</span><br />
(This doesn't seem to help this bug...)
<br />
<label for="page-input-1">1st page input</label><br />
<input type="text" value="" id="page-input-1" /><br />
<div style="min-height: 200px; margin: 1rem 0">
If you place the focus in the input below (which should keep the
iframe in the viewport) then it typically allows you to place the
input into the iframe field from there.
</div>
<label for="page-input-3">2nd page input</label><br />
<input type="text" value="" id="page-input-3" /><br />
<iframe
src="https://ios-iframe-cross.azurewebsites.net/iframe"
id="iframe-test"
style="width: 100%; height: 100px"
></iframe>
<iframe
src="https://ios-iframe-cross.azurewebsites.net/iframe"
id="iframe-test"
style="width: 100%; height: 100px"
></iframe>
<iframe
src="https://ios-iframe-cross.azurewebsites.net/iframe"
id="iframe-test"
style="width: 100%; height: 100px"
></iframe>
<div style="min-height: 400px">
Three criteria are needed for this:
<ol>
<li>
Cross-origin iframe source (<a href="index-cross-1"
>example with just this changed)</a
>
</li>
<li>
Parent page is attaching an event listener to either touchstart,
touchmove or touchend (<a href="index-cross-2"
>example with just this changed</a
>)
</li>
<li>
The iframe’s field is off-screen when a different field has focus
and keyboard present (<a href="index-cross-3"
>example with just this changed</a
>)
</li>
</ol>
<br />
<a href="index-cross-fix">Possible fix</a><br />
<br />
Scroll down for another input that should put the iframe off screen.
</div>
<label for="page-input-1-below">Input after iframe</label><br />
<input type="text" value="" id="page-input-1-below" /><br />
</form>
<script type="text/javascript">
// break this page:
document
.querySelector("body")
.addEventListener("touchstart", function () {});
var workaround = false;
var workaroundSpan = document.getElementById("span-workaround");
document
.getElementById("btn-workaround--css")
.addEventListener("click", function (event) {
if (!workaround) {
document.styleSheets[0].insertRule(
"input:hover { cursor: text }",
0
);
workaroundSpan.innerHTML = "<b>Workaround applied</b>";
} else {
document.styleSheets[0].deleteRule(0);
workaroundSpan.innerHTML = "Not applied";
}
workaround = !workaround;
event.preventDefault();
});
</script>
</div>
</body>
</html>