Internet Explorer 9, Mootools and a „simple“ textarea …

Veröffentlicht: 21. Mai 2012 in Web
Schlagwörter:, , , , , , , , ,

While developing a online text editor with the HTML <textarea> element, I found a very strange behavior of the <textarea> in IE9 in rotated mode. The rotated textarea element is a functional requirement, so it cannot be rejected. The textareas dimensions should also automatically align on text input.

In the first solution, I set the content and styles of the textarea like so:

var elTextarea = new Element("textarea").inject(document.body);

elTextarea.set("text", textContent);

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)"
});

On a „keydown“-event, I aligned the textareas dimensions to max. width and height of the text content (I did this with a helper <div> element and measured the dimensions of that element).
So far the solution works properly in Chrome 17+, Firefox 11+ and Opera, but not in IE9😦

In IE9 the textarea jumps around like crazy, parts are hidden or overlayed with some outer content. This problem is solvable by using msTransform instead of -ms-transform (why Micro$oft!? Everbody else uses the -BROWSER-CSS syntax! *grml*).

Here is the first fix:

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",
  "msTransformOrigin":        pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)",
  "msTransform":       "rotate("+ angle +"deg)"
});

The second problem was a more tricky one: The textareas text content is set dynamically via JavaScript and MooTools. After a single read of the text-content, the text did not automatically wrap on the next write in the textarea.

This issue gave me a lot of food for thoughts … The problem was the MooTools method set(attr, content) to set attribute nodes of HTML elements. I did some testing and set the textareas content by .innerHTML, .value and with .textContent. I got the best working solution by using .value to set the content.

So I altered the code from set("text",[...]) to set("value", [...]). The following code example contains the whole solution to this problems:

var elTextarea = new Element("textarea").inject(document.body);

elTextarea.set("value", textContent);

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",
  "msTransformOrigin":        pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)",
  "msTransform":       "rotate("+ angle +"deg)"
});

Who would have thought that three lines of code would cause so much trouble in IE9 …

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s