Will finish in the morning

Kindle Paperwhite browser

Kindle Paperwhite
Screen resolution 768 × 1024, 16 shades of gray
Viewport size 758 × 899
Browser WebKit-powered
User Agent (javascript) Mozilla/5.0 (X11; ; U; Linux armv7l; en-us) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
User Agent (http header) Mozilla/5.0 (X11; U; Linux armv7l like Android; en-us) AppleWebKit/531.2+ (KHTML, like Gecko) Version/5.0 Safari/533.2+ Kindle/3.0+
Acid3 100/100
HTML5 Test 212/555
CSS3 Test 45%

Kindle Paperwhite is a new e-book reader by Amazon, equipped with e-ink touch-screen, Wi-Fi and, optionally, 3G.

Peperwhite’s Browser is an improved version of Kindle Keyboard’s browser. Browser’s performance increased significantly compared to the predecessor, its support for HTML5 features improved.

Paperwhite’s user-agent string is weird. While http header contains quite typical user-agent string, navigator.userAgent contains another, which can be hardly identified among the dozens of other WebKits. Yet another reason to use feature detection.

Feature tests

Feature tests are done using Modernizr. Full table of my tests on google docs.

Feature Test Actual result
backgroundsize True True
bgsizecover True True
borderradius True True
boxshadow True True
boxsizing True True
cssanimations True True (-webkit-)
cssgradients True True (-webkit-)
csstransforms True True (-webkit-)
csstransforms3d False True (-webkit-)
csstransitions True True (-webkit-)
fontface True True
mediaqueries True True
opacity True True
rgba True True
textshadow True True
touch False False
video False False

Animations

Just like the predecessor, Kindle Paperwhite supports animation and transitions, which is a painful sight considering e-paper’s response time.

Touch

New Kindle doesn’t have any hardware keys and is fully controlled from the touch screen. The browser is controlled with habitual swipe and pinch gestures. Touch events, however, are not supported.

All the links are forced with text-decoration: underline. But, unlike on Kindle Keyboard, on Paperwhite you can redefine this using !important:

h1.title a {
	text-decoration: none !important; /* no underline for Kindle! */
}

Fonts

All the major font formats are supported (woff, ttf and svg). The browser has weird intolerance for Scada font:

screenshot showing bug with Scada font

Other fonts seem to work just fine.

Scrolling

Scrolling isn’t that slick when it come to internal scrollable blocks. If, for instance, there’s an internal block with horizontal scroll occupying entire viewport, it’s very problematic to scroll the page as all your attemps lead to that block being scrolled horizontally instead:

screenshot showing an example state when it’s problematic to scroll the page
Can’t scroll this!

box-shadow bug

If there is a shadow going outside of the viewport, or there is a block with box-shadow sitting somewhere outside of the viewport (even if it’s in the overflow of the other block), viewport expands to fit the shadow. Rather weird and annoying bug.

Forms

The browser has rudimentary support for new input types. range slider barely works:

screenshot showing input types test result

There’s no validation, and, therefore, no support for required and pattern attributes.

Conclusion

Evolutionary descendant of the previous generation. There’s a big chance your mobile-optimized site will work just fine on new Kindle without any additional tweaks.

Non-mobile sites also work quite adequately.

Published on in Rare species