HTML input element of type color is not working properly in webview of android app based on cordova
Reported by
yogeshva...@gmail.com,
Oct 14
|
|||||||||||
Issue descriptionSteps to reproduce the problem: 1. click on color input 2. color seection popup will open 3. more button is not visible What is the expected behavior? More button should be visible What went wrong? More button is clickable but not visible. When the app is build on browser and tested on chrome, it works as expected. Did this work before? N/A Chrome version: 69.0.3497.100 Channel: stable OS Version: 8.0.0 Flash Version:
,
Oct 15
@yogeshvaidya13: Could you please provide sample test file to reproduce this issue, this would help in further triaging of the issue. Thanks!
,
Oct 15
,
Oct 16
Reporter, would you post an HTML file generated by Cordova for an app please?
,
Oct 17
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
</head>
<body>
<input type="color" name="color" id="color" value="#000000">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
,
Oct 17
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Oct 17
Tested the issue on android and unable to reproduce the issue Steps to reproduce: -------------------------- 1. Launched chrome and opened HTML file 2. Clicked on color picker and observed more button Chrome version: 69.0.3497.100 OS: Android 9.0 Android device: Pixel 2 XL @ yogeshvaidya13: Please check screencast and let us know if we miss anything. Is this issue consistently reproducible? Any information on reproducing the issue would help in better triaging. Thanks!
,
Oct 17
Delete comment ⚐ It works perfectly fine on Chrome for me as well. But when I build the APK on Cordova and run it inside app, I am not able to see the more button(though that area is clickable and work as expected, text is not visible). I am out of station for the day. I'll be sharing screencast of it soon.
,
Oct 17
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Oct 18
yogeshvaidya13@ : Along with screencast please provide sample app to test this issue from our end as opening HTML file in chrome doesn't reproduce this issue. Thanks!
,
Oct 18
I guess this is an issue in the dark theme. "More" button has fixed white background, and it seems "More" text color depends on the OS theme. https://cs.chromium.org/chromium/src/components/embedder_support/android/java/src/org/chromium/components/embedder_support/delegate/ColorPickerMoreButton.java?type=cs&sq=package:chromium&g=0 +boliu@ and tedchoc@, owners of ColorPickerMoreButton.java
,
Oct 18
,
Oct 18
As the video and code is above 10mb, i am abke to upload it here. Use https://drive.google.com/open?id=1edbWYymz_e9BLVvzyHlRjRF8ZX0gFK2j this link to download the video, apk and cordova project.
,
Oct 18
Hi, I use Lenovo k8 note with android version 8.0.0, I have checked Moto g4+ as well and got the same results. I'll check it on few more devices and get back to you. Is there any way to manually overwrite it than changing the whole default dark theme?
,
Oct 19
No there is override that specifically. If you look at the code here: https://cs.chromium.org/chromium/src/components/embedder_support/android/java/src/org/chromium/components/embedder_support/delegate/ColorPickerMoreButton.java?type=cs&sq=package:chromium&g=0 It sets the background color of the button to white, but does not set the text color, which means the color is coming from the theme. I'm not entirely sure which color in the theme it is though, and if apps are able to override a particular color, but they probably shouldn't. otoh, chrome is kind of assuming that the default text color is not white here, which might be worth fixing. +some more ui folks
,
Oct 19
I guess if we specify the background color, we should specify the text color as well. Or if we want to allow themed color, we should adopt themed color on both the background color and text color. Sounds reasonable?
,
Oct 19
sgtm
,
Oct 20
What would you recommend me to do? Wait for an update or switch to other themes? |
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by chelamcherla@chromium.org
, Oct 15