Debugging layout repaint issues triggered by CSS Transition

Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered.

The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the letter “D” is shows. The remaining part fades-in on hover.

I was quite surprised to see the whole page flashing green given the transition was scoped to a very isolated element. I didn’t really see any connection between animating a span and causing repaint on the whole page.

The culprit: Stacking Contexts

Debugging layout repaint issues triggered by CSS Transition →

Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS

Handcrafted recreation of an 18th-century oil painting using just HTML and CSS.

Here’s an analysis of it using the Chrome DevTools, as recorded by Paul Irish:

Chrome only though:

Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

However, the results in other browsers are quite viewable (and remind me of the ACID tests)

Pure CSS Francine →
Pure CSS Francine Source →

Patrick Hughes 3D Paintings

This is an amazing piece of 3D art where the closest part of the picture appears to be the furthest away, an optical illusion known as “Reverspective”. As you move around the painting, the room in the painting appears to move with you.

The mind can easily be fooled.

Here’s another one: