Icons on Chrome 61 not working

Post Reply
Jorge
Posts: 19
Joined: 21 Sep 2011, 14:00

29 Sep 2017, 15:02

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 */
}
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

02 Oct 2017, 08:24

Could you please attach buttons with their style for us? Also, do you replicate it on https://www.primefaces.org/icarus/forms.xhtml?

Jorge
Posts: 19
Joined: 21 Sep 2011, 14:00

04 Oct 2017, 19:29

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; }
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

05 Oct 2017, 09:52

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>

Jorge
Posts: 19
Joined: 21 Sep 2011, 14:00

05 Oct 2017, 14:09

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
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2658
Joined: 29 Jun 2013, 12:38

09 Oct 2017, 10:23

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests