2 Replies Latest reply on Jan 10, 2013 11:18 AM by eduard.dudar

    Bad transform CSS in Firefox

    eduard.dudar

      While working on a project I find out the problem in FF. In some circumstances FF doesn't receive CSS transform instructions. Works in Chrome though. Link to a demo project - https://docs.google.com/file/d/0BzJXT4izBbe9TjFjdHhSZEpUd1U/edit. What looks like an arrow in Chrome appears like a rectangle in Firefox.

       

      Mac OS X 10.8.2

      Chrome 23.0.1271.101

      position: absolute;
      margin: 0px;
      left: -37.7px;
      top: -11.13px;
      width: 182.11215022958px;
      height: 53px;
      right: auto;
      bottom: auto;
      -webkit-transform-origin: 50% 50%;
      -webkit-box-shadow: rgba(0, 0, 0, 0.65098) 3px 3px 3px 0px;
      box-shadow: rgba(0, 0, 0, 0.65098) 3px 3px 3px 0px;
      border: 0px none black;
      background-color: white;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-transform: translate(0px, 0px) rotate(0deg) scale(0.58015, 0.58015);
      

       

      Mac OS X 10.8.2

      Firefox 18.0

      position: absolute;
      margin: 0px;
      left: -37.7px;
      top: -11.13px;
      width: 182.112px;
      height: 53px;
      right: auto;
      bottom: auto;
      transform-origin: 50% 50% 0px;
      box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.65);
      border: 0px none rgb(0, 0, 0);
      background-color: rgb(255, 255, 255);
      

       

      This doesn't happen always that's why I'm attaching a project where this happened.