CSS Rendering Tests

This is a collection of tests designed to reveal browser rendering issues. These cases document the various anomilies I have encountered in my CSS experiments. This suite will continue to grow over time.

Note: The "3d-transform-z-order" tests are a work in progress — the spec is ambiguous regarding element sorting so (for now) I've used Safari as my reference implementation. Treat any conclusions I've drawn with caution.

3d-transforms-element-clipping

Test This browser Chrome Firefox Safari IE
Content overflows with position: fixed 43 38 8.0.6 12

3d-transforms-overflow

Test This browser Chrome Firefox Safari IE
Z scaled elements don't affect scrolling (overflow: auto) 43 38 8.0.6 12
Z scaled elements don't affect scrolling (overflow: hidden) 43 38 8.0.6 12
Z scaled elements don't affect scrolling (overflow: initial) 43 38 8.0.6 12
Z scaled elements don't affect scrolling (overflow: scroll) 43 38 8.0.6 12

3d-transforms-overflow-scale-down

Test This browser Chrome Firefox Safari IE
Z scaled elements don't affect scrolling bounds 42 41 8.0.6 12

3d-transforms-z-order

Test This browser Chrome Firefox Safari IE
Z order test 1: single element transformed 43 39 7.0.6 12
Z order test 1: single element transformed / transposed DOM 43 39 7.0.6 12
Z order test 2: both elements transformed 43 39 7.0.6 12
Z order test 2: both elements transformed / transposed DOM 43 39 7.0.6 12
Z order test 3: z-index / single element transformed 43 39 7.0.6 12
Z order test 3: z-index / single element transformed / transposed z-index values 43 39 7.0.6 12
Z order test 4: z-index / both elements transformed 43 39 7.0.6 12
Z order test 4: z-index / both elements transformed / transposed z-index values 43 39 7.0.6 12

pseudo-elements

Test This browser Chrome Firefox Safari IE
Style generated content using ::first-line (display: block) 43 39 8.0.6 12
Style generated content using ::first-line (display: inline-block) 43 39 8.0.6 12

Tests by Keith Clark - Find me on Twitter if you'd like to talk about them.