Disabling Grid Hover Effect does not work for Chrome

asked 2016-05-10 20:54:23 +0800

ansancle
327 ● 9

updated 2016-05-11 12:22:19 +0800

The removal of the Grid hover effect does not work on Windows Chrome (at least with the CSS I use for every other browser). My CSS is included in the sample code below. In my application I have custom buttons built out of the Vbox component. Css provides the borders to make them look like buttons. On Chrome, only inside a grid component, the mouseover/hover effect is causing the borders to disappear and reappear.

Cut and past this code into ZK Sandbox, it works correctly on Firefox/IE/Edge/Safari and even Ubuntu Chrome but on Windows Chrome the highlight effect of the grid causes the borders to disappear and re-appear. How can I update my CSS so that this does not happen on windows chrome?

        <zk>
  <style>


body 
{
    padding:0 0 0 0 !important;   
    background : #000000;
}

/** Prevents the selection box around components on the Ipad like when you hold down a light button */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}




.z-vbox-separator 
{
    height: 0px !important;
    width: 0px !important;
    visibility: hidden !important;
    margin: 0;
    padding: 0 !important;
}

.z-hbox-separator 
{
    width: 0px;
    visibility: hidden !important;
    margin: 0;
    padding: 0 !important;
}


.z-window-content 
{   
    margin: 0;
    padding: 0 !important;
}





.z-grid {
    border: 1px solid rgba(0, 0, 0, 0);
    overflow: hidden;
}
.z-grid-header {
    background: transparent;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.z-grid-header table {
    border-spacing: 0;
}
.z-grid-header table th, .z-grid-header table td {

    padding: 0;
}
.z-grid-header table th {
    text-align: inherit;
}
.z-grid-header-border {
    border-bottom: 0px solid transparent;
    margin-top: -1px;
    position: relative;
}
.z-grid-body {
    margin-top: auto;
    overflow: hidden;
    position: relative;
}
.z-grid-body table {
    border-spacing: 0;
}
.z-grid-body table th, .z-grid-body table td {

    padding: 0;
}
.z-grid-body table th {
    text-align: inherit;
}
.z-grid-emptybody td {
    color: transparent;
    font-family: Arial,Sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-align: center;
}
.z-grid-footer {
    background: none repeat scroll 0 0 transparent;
    border-top: 0px solid transparent;
    overflow: hidden;
}
.z-grid-footer table {
    border-spacing: 0;
}
.z-grid-footer table th, .z-grid-footer table td {

    padding: 0;
}
.z-grid-footer table th {
    text-align: inherit;
}
.z-grid-footer .z-footer {
    overflow: hidden;
}
.z-grid-odd > .z-row-inner, .z-grid-odd > .z-cell .z-row-over {
    background: transparent !important;
}

  .z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
        background: transparent !important;
    }

.z-columns th:first-child {
    border-left: medium none;
}
.z-columns th.z-columns-border:first-child {
    border-left: 0px solid transparent;
}
.z-columns-bar {
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
}
.z-column {
    background: transparent;
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
    overflow: hidden;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
.z-column-hover {
    background: transparent;
}
.z-column-hover .z-column-button {
    display: block;
}
.z-column .z-column-content {
    position: relative;
}
.z-column-sort .z-column-content {
    cursor: pointer;
}
.z-column-sort .z-column-sorticon {
    color: transparent;
    left: 50%;
    position: absolute;
    top: -7px;
}
.z-column-button {
    border-left: 0px solid transparent;
    box-shadow: 0px 0 transparent inset;
    color: transparent;
    cursor: pointer;
    display: none;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 23px;
    z-index: 15;
}
.z-column-button:hover {
    background: transparent;
}
.z-column-sizing, .z-column-sizing .z-column-button, .z-column-sizing.z-column-sort .z-column-button {
    cursor: e-resize;
}
.z-row td:first-child {
    border-left: medium none;
}
.z-row .z-row-inner, .z-row .z-cell {
    border-left: 0px solid transparent;
    background: transparent;
    overflow: hidden;
}
.z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
    background: transparent;
    position: relative;
}
.z-row:hover > .z-row-inner > .z-row-content {
    color: transparent;
     background: transparent;
}
.z-group-inner {
    background: transparent;
    border-bottom: 0px solid transparent;
    border-top: 0px solid transparent;
    overflow: hidden;
    position: relative;
}
.z-group-inner .z-group-content, .z-group-inner .z-cell {
    padding: 3px 5px;
}
.z-group-icon {
    color: transparent;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    height: 16px;
    line-height: 16px;
    position: relative;
    text-align: center;
    width: 16px;
}
.z-group-icon:hover {
    color: transparent;
}
.z-groupfoot-inner {
    background: transparent;
    overflow: hidden;
}
.z-column-content, .z-row-content, .z-group-content, .z-groupfoot-content, .z-footer-content {
    color: #FFFFFF;
    font-family: Arial,Sans-serif;
    font-size: 12px;
    line-height: 24px;
    overflow: hidden;
    padding: 4px 5px;
    background: transparent;
}
.z-column-content {
    font-weight: bold;
    padding: 4px 5px 3px;
}
.z-group-content .z-label, .z-groupfoot-content .z-label {
    font-weight: bold;
}
.z-grid-body .z-cell {
    font-family: Arial,Sans-serif;
    font-size: 12px;
    line-height: 24px;
    overflow: hidden;
    padding: 4px 5px;
}
.z-grid-paging-top {
    border-bottom: 0px solid transparent;
    overflow: hidden;
    width: 100%;
}
.z-grid-paging-bottom {
    border-top: 0px solid transparent;
    overflow: hidden;
    width: 100%;
}


.z-window 
{
    border: none !important;
    background: none repeat scroll 0 0 #000000;
}




.dhSquareButton 
{

     border: .18em solid #FFFFFF;
  }


.dhSquareButton-border 
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; 
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     -webkit-transition-property: all;
     -moz-transition-property: all;
     -o-transition-property: all;
     transition-property: all;
     -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
     transition-duration: 0.3s;
     color: #FFFFFF;
     border: .18em solid #FFFFFF; 
     background: none;
     text-shadow: none; 
 }





    .dhIpadHomeWindowStyle .z-window-content
{
    background: #000000;   
}



  </style>

  <window border="normal" title="hello"  sclass="dhIpadHomeWindowStyle">

                <grid width="100%">
                    <rows>
                        <row>
                                                  <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                        </row>  
                        <row>
                        <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                        </row>                          

                    </rows>
                </grid>

<separator bar="true" spacing="20px"/>
<label value="This vbox is not in the grid - so the mouseover/hover has no effect" style="color:#FFFFFF"/>
<vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>


      </window>
    </zk>