Skip to content

Commit 9f63c95

Browse files
EvilurEvilur
authored
Fix: Overflow hints behaviour (#2304) (#2305)
* Fix: overflow-x hints behaviour (#2304) Closes #2304 - Now the hints host get the height and the width of the visible user's viewport (instead of the only height before that) - Width and height are now taken without considering the scrollbar and without floating point values. Isues: #2304, #2294 * Test: add 'Overflow-Y' example (#2294)
1 parent 0354c2a commit 9f63c95

File tree

3 files changed

+91
-5
lines changed

3 files changed

+91
-5
lines changed

‎src/content_scripts/common/hints.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -193,9 +193,18 @@ div.hint-scrollable {
193193
[mode=input] mask.activeInput {
194194
background: rgba(0, 0, 255, 0.25);
195195
}`);
196-
/* When the <style> loaded, set host's height */
197-
hintsStyle.onload = () =>
198-
{ hintsHost.style.height = `${window.scrollY + window.innerHeight}px`; }
196+
/* When the <style> loaded, set hints host's size */
197+
hintsStyle.onload = () => {
198+
/* Get height and width in integers */
199+
const height = Math.floor(document.documentElement.scrollTop +
200+
document.documentElement.clientHeight) - 1;
201+
const width = Math.floor(document.documentElement.scrollLeft +
202+
document.documentElement.clientWidth) - 1;
203+
204+
/* Set height and width */
205+
hintsHost.style.height = `${height}px`;
206+
hintsHost.style.width = `${width}px`;
207+
}
199208

200209
hintsHost.shadowRoot.appendChild(hintsStyle);
201210
const regionalHints = createRegionalHints(clipboard);

‎src/content_scripts/content.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ div.surfingkeys_hints_host {
33
opacity: 1;
44
color-scheme: auto;
55
position: absolute;
6-
inset: 0 0 auto 0;
7-
overflow: visible;
6+
top: 0;
7+
left: 0;
8+
overflow: hidden;
9+
pointer-events: none;
810
}
911
div.surfingkeys_match_mark {
1012
background-color: #ff0;

‎tests/data/too-low-buttons-2294.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Overflow-Y Examples</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
body {
13+
position: absolute;
14+
bottom: 0;
15+
width: 100vw;
16+
display: flex;
17+
flex-direction: row;
18+
align-items: flex-end;
19+
justify-content: space-around;
20+
}
21+
button {
22+
width: 100%;
23+
height: 8px;
24+
background-color: #000;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div>
30+
<code>
31+
Button 1<br>
32+
|<br>
33+
|<br>
34+
v
35+
</code>
36+
<button></button>
37+
</div>
38+
<div>
39+
<code>
40+
Button 2<br>
41+
|<br>
42+
|<br>
43+
v
44+
</code>
45+
<button></button>
46+
</div>
47+
<div>
48+
<code>
49+
Button 3<br>
50+
|<br>
51+
|<br>
52+
v
53+
</code>
54+
<button></button>
55+
</div>
56+
<div>
57+
<code>
58+
Button 4<br>
59+
|<br>
60+
|<br>
61+
v
62+
</code>
63+
<button></button>
64+
</div>
65+
<div>
66+
<code>
67+
Button 5<br>
68+
|<br>
69+
|<br>
70+
v
71+
</code>
72+
<button></button>
73+
</div>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)