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:

Image

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 aragorn
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:

Image

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 aragorn
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.

Image

Re: Icons on Chrome 61 not working

Posted: 09 Oct 2017, 10:23
by aragorn
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 aragorn
Thanks a lot for the update! This issue may be useful for other users.

Regards,