Internet Explorer has a problem in setting background image to textarea, the scrolling mechanism as implemented by the browser is buggy while all other browsers handle it properly, IE fails naturally :) . The problem is if you set a background image to textarea and when you scroll the textarea the background image also scrolls, this behavior is incorrect because as far as I can recall an element background should only scroll with regards to the viewport. The easiest way to reproduce this bug is to use a vertical “sprite” image as the textarea background and set background-repeat to “no-repeat“, background-attachment to “scroll“, also apply position values to display part of image and try to enter multiline text in the box you can see the bug in IE. The only fix is that to set the background-attachment value to “fixed” which eventually solves the problem. This problem may be present in input boxes also in IE although not verified.

Note: But if the textarea is inside a container which itself has positionfixed” and textarea background-attachment has also set to “fixed” then you will not see any background image, the reason for this may be that IE is trying to set the background image according to viewport because of the background-attachment value. I encoutnered this problem few times but so far have not found any solution.

Further reading:

http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment

Note that there is only one viewport per view. If an element has a scrolling mechanism (see ‘overflow’), a ‘fixed’ background doesn’t move with the element, and a ‘scroll’ background doesn’t move with the scrolling mechanism.

Share:
  • Digg
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • Reddit
  • Facebook
  • Technorati
  • MySpace
  • RSS
| Tagged , , , , |