6

I'm in the process of developing a website that is reminiscent of an old CRT monitor. To achieve the effect, I've taken an image that consists of a horizontal black line and a white line repeating both on the vertical and horizontal axis. The image opacity to achieve this effect has a very low opacity so that you can see the text beneath the lines.

enter image description here

It works beautifully every computer I've tested it on, except for one. I have a high end nVidia video card on the machine that the problems occur on. It appears that the high resolution actually creates a wave effect from the lines. They fade in and out, vertically, creating a very unpleasant effect. When the resolution is turned down very low, the bad-effect goes away and the screen appears as I intended.

It appears that the high resolution is making the lines merge together, giving it a fade-in fade-out gradient effect.

I can't demonstrate the issue because it's computer dependent and looks different depending on what system it's being viewed on. Some users here may see it, while others may not.

Has anyone experienced this issue, and is there a way I can overcome this in my design?

3
  • This isn't really a User Experience question, I don't think. It's more of a Graphic Design one.
    – JonW
    Commented Apr 3, 2013 at 14:01
  • 4
    @JonW It's a user experience question because if I don't fix it, the user with experience a seizure. :)
    – George
    Commented Apr 3, 2013 at 14:05
  • Take a picture with a camera to show us. The already posted answer is surely the solution though. Basically something's causing the image to be scaled up or down. Either way it will mess with the pixel alignment.
    – Steven Lu
    Commented Apr 3, 2013 at 15:38

1 Answer 1

6

You are experiencing a problem with a Moiré pattern as a result of Aliasing.

This can be solved by using larger spacing between the lines in the image when it is used on a higher pixel density screen; by softening the image slightly; or possibly by adjusting the aliasing settings on the high end graphics card.

I suggest taking a look this article on Image resizing for the web, which deals with moiré patterns and how to avoid them.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.