Issue
I've searched all over the place and can't seem to find anyone with the same issue.
Summary of the problem:
When I select some text the standard menu (Copy, Paste etc.) appears, but when I modify the selection so that it contains words with certain CSS rules the menu disappears (while the selection remains active).
So far I've encountered the issue on the following devices:
- "Samsung Galaxy Tab S" (SM-T705), Android 6.0.1, Chrome/78.0.3904.108
- "Samsung Galaxy Tab A" (SM-T550), Android 7.1.1, Chrome/77.0.3865.92
- "Samsung Galaxy Tab S4" (SM-T830), Android 9, Chrome/78.0.3904.108
- "OnePlus 6T", Android 9, Chrome/79.0.3945.93
Android versions below 6 don't seem to be affected (I assume because the text selection menu is different).
Longer version of the problem:
I'm working on a project in which we have web pages full of text and this text should be selectable.
The issue is that certain HTML elements have CSS rules that break the text selection menu and I have no idea why.
Unfortunately these web pages are generated by a third party so I do not have direct control over their structure/CSS rules.
I took one of these pages and stripped it as much as I could, leaving only the things required to replicate the issue.
Here is the HTML of the page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta content="width=558, height=754" name="viewport">
<meta charset="utf-8">
<meta content="0:0:558.425:754.016" name="pagecontentbbox">
<title>Test Page</title>
<link href="css/page.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div id="container">
<div id="parent-p1">
<p><span class="vab lh1 psa" id="first_span"><span
class="sid19 sf19 sf1 sf20 di psr b0 l0" data-x="126" data-y="322" id="word8">ONE</span><span
class=" sf19 di psr b0 l0 fm sf22"> </span><span
class="sid23 sf19 sf1 sf20 di psr b0 l0" data-x="165" data-y="322" id="word9">TWO</span><span
class=" sf19 di psr b0 l0 fm sf24"> </span><span
class="sid25 sf19 sf1 sf20 di psr b0 l0" data-x="246" data-y="322" id="word10">THREE</span><span
class=" sf7 di psr b0 l0 fm sf8"> </span></span></p>
<p><span class="vab lh1 psa" id="second_span"><span
class="sid448 sf448 sf1 sf449 di psr b0 l0" data-x="126" data-y="580"
id="word234">FOUR</span><span class=" sf448 di psr b0 l0 fm sf451"> </span><span
class="sid452 sf448 sf452 sf449 di psr b0 l0" data-x="143" data-y="579"
id="word235">FIVE</span><span class=" sf448 di psr b0 l0 fm sf454"> </span><span
class="sid455 sf448 sf452 sf449 di psr b0 l0" data-x="179" data-y="579"
id="word236">SIX</span><span
class=" sf448 di psr b0 l0 fm sf456"> </span><span
class="sid457 sf448 sf1 sf449 di psr b0 l0" data-x="260" data-y="580"
id="word237">SEVEN</span><span class=" sf448 di psr b0 l0 fm sf458"> </span><span
class="sid459 sf448 sf1 sf449 di psr b0 l0" data-x="280" data-y="580"
id="word238">EIGHT</span><span
class=" sf7 di psr b0 l0 fm sf8"> </span></span></p></div>
</div>
</section>
</body>
</html>
Here is the CSS of the page:
body {
height: 754px;
margin: 0;
width: 558px;
}
span {
border: 0;
margin: 0;
white-space: pre;
position: relative;
}
#container {
height: 754.016px;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 558.425px;
}
#parent-p1 {
-moz-transform: scale(0.15613);
-moz-transform-origin: left bottom;
-ms-transform: scale(0.015613);
-ms-transform-origin: left bottom;
-o-transform: scale(0.015613);
-o-transform-origin: left bottom;
-webkit-transform: scale(0.015613);
-webkit-transform-origin: left bottom;
height: 100%;
position: absolute;
white-space: nowrap;
width: 100%;
}
#first_span {
bottom: 27661.888px;
left: 8073.216px;
}
#second_span {
-moz-transform: matrix(0.98, -0, -0, 1, 0, 0);
-moz-transform-origin: bottom left;
-ms-transform: matrix(0.98, -0, -0, 1, 0, 0);
-ms-transform-origin: bottom left;
-webkit-transform: matrix(0.98, -0, -0, 1, 0, 0);
-webkit-transform-origin: bottom left;
bottom: 11185.536px;
left: 8073.216px;
transform: matrix(0.98, -0, -0, 1, 0, 0);
transform-origin: bottom left;
}
.vab {
vertical-align: bottom;
}
.psa {
position: absolute;
}
.lh1 {
line-height: 1;
}
.psr {
position: relative;
}
.b0 {
bottom: 0;
}
.l0 {
left: 0;
}
.fm {
font-family: monospace;
}
.sf7 {
font-size: 0px;
}
.sf8 {
letter-spacing: 0px;
}
.sf19 {
font-size: 2048px;
}
.sf20 {
color: #D6AB52;
}
.sf22 {
letter-spacing: -807.117px;
}
.sf24 {
letter-spacing: -798.643px;
}
.sf448 {
font-size: 1280.002px;
}
.sf449 {
color: #CA9937;
}
.sf451 {
letter-spacing: -509.595px;
}
.sf454 {
letter-spacing: -548.36px;
}
.sf456 {
letter-spacing: -509.217px;
}
.sf458 {
letter-spacing: -509.749px;
}
.sid23 {
letter-spacing: -7.629px;
}
.sid25 {
letter-spacing: -2.664px;
}
.sid448 {
letter-spacing: -0px;
}
.sid452 {
letter-spacing: 9.408px;
}
.sid455 {
letter-spacing: 0px;
}
.sid457 {
letter-spacing: 0px;
}
.sid459 {
letter-spacing: -4.058px;
}
This is how the page is being loaded:
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webview);
webView.setWebContentsDebuggingEnabled(true);
webView.loadUrl("file:///android_asset/page.html");
}
}
If useful, I can upload the test app to GitHub.
Here are a few cases to illustrate the issue.
Case 1:
- Select "ONE", the menu appears. (Ok)
Case 2:
- Select "TWO", the menu appears.
- Change the selection so "ONE" is also included. The menu disappears, while the selection remains active. (Not ok)
Case 3:
- Select "TWO", the menu appears.
- Change the selection so "THREE" is also included. The menu is still there. (Ok)
Case 4:
- Select "FOUR", the menu appears. (Ok)
Case 5:
- Select "FIVE", the menu appears.
- Change the selection so "FOUR" is also included. The menu disappears, while the selection remains active. (Not ok)
Case 6:
- Select "FIVE", the menu appears.
- Change the selection so "SIX" (or "SEVEN" or "EIGHT") is also included. The menu is still there. (Ok)
Basically if you only select the word that causes the problem, the menu appears. It only disappears when a text selection containing the problematic word is created.
In the example provided the words that are causing the problem are "ONE" and "FOUR" however I don't believe they are the cause per se.
It just so happens that each of these words is at the beginning of a <span> element (id="first_span" and id="second_span") that have a certain CSS rule that might be causing the problem.
The CSS rule in question is "left: ...px;" and after disabling it (or setting to 0) for both <span> elements, the menu behaves as expected.
So at this point I don't know if it's an issue caused by overlapping elements, nesting or something else.
Hope I gave all the necessary information and I would really appreciate if anyone could help me figure out what's going on and why this is happening.
Solution
After doing some digging, I found out that the issue wasn't caused by the WebView but by Chrome (introduced in some version between "71.0.3578.99" and "76.0.3793.0").
In fact there is already an open issue on their bug tracker at the following link:
https://bugs.chromium.org/p/chromium/issues/detail?id=962413
Answered By - I. L.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.