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?