Saturday, June 30, 2012

Re: CSS3 Transforms

Solved:

Use MozTransform, not mozTransform

You can confirm this by doing yourElement.style. in Firebug to see the list of all available CSS style property names. 

Because GWT just passed through to this (code shown below), you need to match the names exactly. 
  • WebKit - does not matter if upper/lower
  • Mozilla - needs uppercase
  • IE9 - needs lowercase
  • Opera - uppercase
  • khtml - lowercase
It looks like you may need to empirically determine this capitalization for each browser. :(
  /**     * Sets the value of a named property.     */    private native void setPropertyImpl(String name, String value) /*-{      this[name] = value;    }-*/;
Also, just a tip, but it would be easier if you built the property value string once, and then iterated across the list of property names. Though it is not the case here, you run the risk of a typo in one of the six setProperty() calls corrupting the CSS, which would be easy to miss when reading over the code. Try something like the following:
    /**       * Apply all vendor prefixed styles for translation of given element       * @param el element to translate       * @param x distance to translate       */      public static void translateX(Element el, int x) {            String value = "translate(" + x + "px)";          String name = "Transform";            String[] engines = new String[]{"","webkit","ms","Moz","O","khtml"};                  for( String prefix : engines ) {              el.getStyle().setProperty( prefix+name, value);          }      }


Sincerely,
Joseph

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/e3-Hk3JSZqoJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment