Search code examples
htmlcssgoogle-chromewebkit

webkit transform translateZ alternative for position fixed

I have an application with a button. when you click on said button, a dropdown menu appears which has the following css attribute: position: fixed

I've found the following work-around: -webkit-transform: translateZ(0);

When this style is applied, position:fixed; works as intended, but the issue is that the text in the drop-down menu crops up, when you apply: -webkit-transform: translateZ(100);

Any number other than 0 fixes the cropped menu, but the position: fixed stops working.

Is there an alternative to -webkit-transform: translateZ(0); to fix position: fixed; on Chrome, I can't seem to find one all posts I find tell me to use webkit transform translateZ?

Solution 
  • @media screen and (-webkit-min-device-pixel-ratio:0) { 
 #link1{top: -15%!important;}
}

    this works, it's a bit inconvenient but atleast it works.