Page 1 of 1
Icons on Chrome 61 not working
Posted: 29 Sep 2017, 15:02
by Jorge
Hi guys,
After I updated the Chrome to version "Version 61.0.3163.100 (Official Build) (64-bit)" The icons and buttons starts to get really odd. Like this:
See the problem in the last row of the datatable.
And when you over the mouse on the icons it gets crazy blinking the colors.
Searching around I was able to find this post:
viewtopic.php?t=52431 that claims to be solved the problem but it is using Ultima and on Icarus we don't have the
_fonts.scss file, the mentioned section is at the
_theme.scss and there is no "local src" on it. So I could not find a way to solve the problem.
This is the Font section at the _themes.scss file:
Code: Select all
/* Icarus Theme */
/* pt-sans-regular */
@font-face {
font-family: 'PT_Sans';
font-weight: normal;
src: url("\#{resource['primefaces-icarus:fonts/pt_sans-web-regular.eot']}"); /* IE9 Compat Modes */
src: url("\#{resource['primefaces-icarus:fonts/pt_sans-web-regular.eot']}#iefix") format('embedded-opentype'), /* IE6-IE8 */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-regular.woff2']}") format('woff2'), /* Super Modern Browsers */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-regular.woff']}") format('woff'), /* Modern Browsers */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-regular.ttf']}") format('truetype'), /* Safari, Android, iOS */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-regular.svg']}#PT_Sans") format('svg'); /* Legacy iOS */
}
/* pt-sans-700 */
@font-face {
font-family: 'PT_Sans';
font-weight: bold;
src: url("\#{resource['primefaces-icarus:fonts/pt_sans-web-bold.eot']}"); /* IE9 Compat Modes */
src: url("\#{resource['primefaces-icarus:fonts/pt_sans-web-bold.eot']}#iefix") format('embedded-opentype'), /* IE6-IE8 */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-bold.woff2']}") format('woff2'), /* Super Modern Browsers */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-bold.woff']}") format('woff'), /* Modern Browsers */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-bold.ttf']}") format('truetype'), /* Safari, Android, iOS */
url("\#{resource['primefaces-icarus:fonts/pt_sans-web-bold.svg']}#PT_Sans") format('svg'); /* Legacy iOS */
}
Re: Icons on Chrome 61 not working
Posted: 02 Oct 2017, 08:24
by mert.sincan
Could you please attach buttons with their style for us? Also, do you replicate it on
https://www.primefaces.org/icarus/forms.xhtml?
Re: Icons on Chrome 61 not working
Posted: 04 Oct 2017, 19:29
by Jorge
Hi @Aragorn,
I couldn't reproduce it on the official Icarus Primefaces page. I've noticed that it happens in most cases inside Datatables and Panels (any panel such as wirzards, dialogs, etc).
So I got the Icarus template code version 1.1.1 and changed the
data.xhtml file adding the following column (last one in the first DataTable):
**(the code is available at the zip file we bought)
Code: Select all
<p:column headerText="Color" sortBy="#{car.color}" style="width:340px;">
<p:commandButton id="buttonTest1" icon="fa fa-trash" styleClass="ui-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest2" icon="fa fa-trash" styleClass="ui-button green-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest3" icon="fa fa-trash" styleClass="ui-button light-green-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest4" icon="fa fa-trash" styleClass="ui-button black-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest5" icon="fa fa-trash" styleClass="ui-button aqua-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest6" icon="fa fa-trash" styleClass="ui-button navy-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest7" icon="fa fa-trash" styleClass="ui-button grey-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest8" icon="fa fa-trash" styleClass="ui-button red-button" style="width: 33px;margin-right: 5px;"/>
<p:commandButton id="buttonTest9" icon="fa fa-trash" styleClass="ui-button orange-button" style="width: 33px;margin-right: 5px;"/>
</p:column>
Here is the problem:
As you can see we have changed the default theme color, we created one of our own. And the main change on those styles was on the buttons border-color which we defined a transparency instead of a color.
Here are the styles:
Code: Select all
/*Green Button*/
.ui-button.green-button {
background-color: #109145;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.green-button.ui-state-hover {
background-color: #14A850; }
.ui-button.green-button.ui-state-active {
background-color: #109145; }
/*Light Green Button*/
.ui-button.light-green-button {
background-color: #B7D666;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.light-green-button.ui-state-hover {
background-color: #7FA128; }
.ui-button.light-green-button.ui-state-active {
background-color: #B7D666; }
/*Red Button*/
.ui-button.red-button {
background-color: #b8312e;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.red-button.ui-state-hover {
background-color: #D13737; }
.ui-button.red-button.ui-state-active {
background-color: #b8312e; }
/*Blue Button */
.ui-button.blue-button {
background-color: #5ba5d8;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.blue-button.ui-state-hover {
background-color: #409cdc; }
.ui-button.blue-button.ui-state-active {
background-color: #1a51b0; }
/*Aqua Button*/
.ui-button.aqua-button {
background-color: #5ba5d8;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.aqua-button.ui-state-hover {
background-color: #67BEEF; }
.ui-button.aqua-button.ui-state-active {
background-color: #5ba5d8; }
/*Navy Button*/
.ui-button.navy-button {
background-color: #1f3b5a;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.navy-button.ui-state-hover {
background-color: #284E70; }
.ui-button.navy-button.ui-state-active {
background-color: #1f3b5a; }
/*Black Button*/
.ui-button.black-button {
background-color: #353535;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.black-button.ui-state-hover {
background-color: #4a4a4a; }
.ui-button.black-button.ui-state-active {
background-color: #353535; }
/*Grey Button*/
.ui-button.grey-button {
background-color: #a4a4a4;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.grey-button.ui-button span.ui-button-text {
color: white; }
.ui-button.grey-button.ui-state-hover {
background-color: #B2B2B2; }
.ui-button.grey-button.ui-state-active {
background-color: #a4a4a4; }
/*Orange Button*/
.ui-button.orange-button {
background-color: #ea9624;
border-color: rgba(0, 0, 0, 0.22); }
.ui-button.orange-button.ui-button span.ui-button-text {
color: white; }
.ui-button.orange-button.ui-state-hover {
background-color: #FF9E29; }
.ui-button.orange-button.ui-state-active {
background-color: #ea9624; }
Re: Icons on Chrome 61 not working
Posted: 05 Oct 2017, 09:52
by mert.sincan
Could you please try the following code?
Code: Select all
<style type="text/css">
/*Green Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.green-button { background-color: #109145; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.green-button.ui-state-hover { background-color: #14A850; }
body .ui-datatable tbody.ui-datatable-data .ui-button.green-button.ui-state-active {background-color: #109145; }
/*Light Green Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.light-green-button { background-color: #B7D666; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.light-green-button.ui-state-hover { background-color: #7FA128; }
body .ui-datatable tbody.ui-datatable-data .ui-button.light-green-button.ui-state-active { background-color: #B7D666; }
/*Red Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.red-button { background-color: #b8312e; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.red-button.ui-state-hover { background-color: #D13737; }
body .ui-datatable tbody.ui-datatable-data .ui-button.red-button.ui-state-active { background-color: #b8312e; }
/*Blue Button */
body .ui-datatable tbody.ui-datatable-data .ui-button.blue-button { background-color: #5ba5d8; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.blue-button.ui-state-hover { background-color: #409cdc; }
body .ui-datatable tbody.ui-datatable-data .ui-button.blue-button.ui-state-active { background-color: #1a51b0; }
/*Aqua Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.aqua-button { background-color: #5ba5d8; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.aqua-button.ui-state-hover { background-color: #67BEEF; }
body .ui-datatable tbody.ui-datatable-data .ui-button.aqua-button.ui-state-active { background-color: #5ba5d8; }
/*Navy Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.navy-button { background-color: #1f3b5a; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.navy-button.ui-state-hover { background-color: #284E70; }
body .ui-datatable tbody.ui-datatable-data .ui-button.navy-button.ui-state-active { background-color: #1f3b5a; }
/*Black Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.black-button { background-color: #353535; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.black-button.ui-state-hover { background-color: #4a4a4a; }
body .ui-datatable tbody.ui-datatable-data .ui-button.black-button.ui-state-active { background-color: #353535; }
/*Grey Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.grey-button { background-color: #a4a4a4; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.grey-button.ui-button span.ui-button-text { color: white; }
body .ui-datatable tbody.ui-datatable-data .ui-button.grey-button.ui-state-hover { background-color: #B2B2B2; }
body .ui-datatable tbody.ui-datatable-data .ui-button.grey-button.ui-state-active { background-color: #a4a4a4; }
/*Orange Button*/
body .ui-datatable tbody.ui-datatable-data .ui-button.orange-button { background-color: #ea9624; border-color: rgba(0, 0, 0, 0.22); }
body .ui-datatable tbody.ui-datatable-data .ui-button.orange-button.ui-button span.ui-button-text { color: white; }
body .ui-datatable tbody.ui-datatable-data .ui-button.orange-button.ui-state-hover { background-color: #FF9E29; }
body .ui-datatable tbody.ui-datatable-data .ui-button.orange-button.ui-state-active { background-color: #ea9624; }
</style>
Re: Icons on Chrome 61 not working
Posted: 05 Oct 2017, 14:09
by Jorge
Hi @Aragorn,
Unfortunately it didn't work. Still same problem. I cleared all my browser cache to be sure and also inspected the code to see if the given style was being applied to the buttons and it was.
Re: Icons on Chrome 61 not working
Posted: 09 Oct 2017, 10:23
by mert.sincan
Unfortunately, I still couldn't replicate it. But, I think it is a Chrome issue. Also, I found some issues about color or icon on chrome;
https://productforums.google.com/forum/ ... WBDLFtbhEs
Re: Icons on Chrome 61 not working
Posted: 17 Jan 2018, 15:46
by Jorge
Hello there,
Just a feedback for this thread.
You were right @aragorn (it was a chrome issue, although I didn't find which one) my chrome is now updated to Version 63.0.3239.132 (Official Build) (64-bit) and the issue do not happens anymore.
Thanks for the support.
Re: Icons on Chrome 61 not working
Posted: 09 Feb 2018, 13:41
by mert.sincan
Thanks a lot for the update! This issue may be useful for other users.
Regards,