How to remove blur when using transform: scale (2)?

  • 0
    We asked to make a version of the site for the visually impaired.

    I tried to cram the site into a frame and enlarge the frame itself using CSS:
    iframe {
        width: 50%;
        height: 50%;
        transform: scale(2);
        transform-origin: left top;

    The scale changes, no question here, but blurring appears on all elements, especially on fonts. Are there ways to combat this blur? Or are there any other ways to scale up your site? Any tricky Canvas solutions to render the visually impaired version? A general purpose digital magnifier, for example?
    JavaScript Jasper Simmons, Nov 20, 2019

  • 2 Answers
  • 0
    Ohh and perversion.

    Use rem instead of pixels. The visually impaired version will scale due to the increased font-size for html

  • 0
    I think js will help you plugin adapting the site for visually impaired

    It is very easy to connect and configure, there have never been any problems with it)

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!