I recently finished developing a website made of scalable vector graphics (SVG). The site looks great on all devices but Chrome for Android. On Android Chrome, the site looks more pixelated near the bottom of the screen. I have cut out a sliver of the site to demonstrate below.

Image resized; click the image for full size. Note: you will probably have to view the image in a bitmap editor to see the difference, as your browser will blur the pixels together in JPG format.

If I scroll the content up, the same section that was just pixelated becomes crisp. It has nothing to do with my graphics, it's all about where they are on the screen.

I am imagining that this is possibly:

  • A numerical-related bug in Chrome Android's anti-aliasing algorithm
  • An intentional feature that figures people look at the top half of their phone screen when reading articles and so increases resolution as they read, pixelating the bottom of the screen almost like a camera focuses on stuff
  • Or more likely, some combination of the two

Does anyone have any familiarity with this effect? This is not present in the Android built-in internet browser on the phone. What is the cause of this pixelation in Android Chrome?

  • Is it using <text> elements in an <svg> element or is it ordinary HTML text? – Andrew Morton Jan 27 at 9:16
  • I don't think the second point about "focusing stuff" is true if anything, moreover if this only happens on your website? Perhaps you can mention the website so that we can also test it? – Andrew T. Jan 27 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy