CODEWITHSUNDEEP
cssgoogle-chromerendering
Matt Lacey
Matt Lacey

Reputation: 8255

Chrome Rendering Issue with column-width

I swear this used to work correctly and it still works correctly in Safari under iOS, but for some reason it's broken in Chrome and apparently (as per our client) in IE 11.

The basic setup is here:

http://codepen.io/mattlacey/pen/BpEvWE

With transform: translateZ(0); commented out then everything that's initially offscreen is never rendered, with it, hardware accelerated rendering is enforced and it is rendered. The issue now is that even though it's rendered the elements can not be intereacted with. I've setup two onclick inline scripts, one on "A.L.C" and one on "KAREN WALKER EYEWEAR". Clicking the first works, while the second does not, because it's in an element that's only displayed because of the transform.

Is there a known work around for this issue?

Upvotes: 1

Views: 585

Answers (2)

thetont
thetont

Reputation: 810

If it is possible for you to edit the HTML, with a little extra markup, it could be resolved wrapping the .filter-values-indexed div in another element and applying the overflow to this new element.

HTML:

<div class="wrap">
  <div class="filter-values-indexed">
  [...]
  </div>
</div>

CSS:

.wrap{
  overflow-x:scroll;
}
.filter-values-indexed{
  width:100vw;
  column-width: 200px;
  max-height: 250px;
}

Upvotes: 1

katzkode
katzkode

Reputation: 2001

I am not sure why this is happening, but if you remove the overflow-x and transform properties, the offscreen content becomes clickable.

.filter-values-indexed{
    column-width: 165px;
    /*overflow-x: auto;*/
    max-height: 250px;
    /*transform: translateZ(0);*/
}

This horizontal scrollbar will move to the bottom of the page. Depending on your specific needs this could be a temporary fix.

Upvotes: 1

Related Questions