CODEWITHSUNDEEP
cssgoogle-chromecross-browsercss-transforms
Isaac Gregson
Isaac Gregson

Reputation: 2075

transform: translateY(-50%) --- Chrome "invalid property value" error, why?

Chrome is giving me an "invalid property value" for transform: translateY(-50%). I've used the necessary vendor prefixes. There are no problems in other browsers.

Any ideas?

Update:
In case it's helpful, here's the context (using Sass indented syntax): 

.modal
  background: #fefefe
  border: $modal--util solid 1px
  border-radius: 2px
  left: 0 
  right: 0
  margin-left: auto
  margin-right: auto
  z-index: 12
  max-width: 380px
  overflow: hidden
  visibility: hidden
  position: fixed
  top: 50%
  transform: translateY(-50%)

Upvotes: 3

Views: 3844

Answers (2)

Nikolay
Nikolay

Reputation: 225

Found this after experiencing the same kind of problem. I had copied a value from Windows' calculator. In my IDE everything looked okay: transform: translateY(-‭85.71428571428574‬%). However when deploying the code the decimal was inserted as ‭. Thus the actual value that was getting to the browser was transform: translateY(-‭‭85.71428571428574‬%).

After manually entering the value the problem went away.

I hope this helps somebody who might stumble upon this after going through the same problem.

Upvotes: 0

Isaac Gregson
Isaac Gregson

Reputation: 2075

Uninstalled and re-installed Chrome and the problem's gone... I think Chrome wasn't auto-updating (I'm on Linux).

Upvotes: 1

Related Questions