Anand Thakker

WTF: position: fixed and z-index on Safari

Safari seems not to respect z-indexes until after browser window is resized. Copy the following code into an HTML file and open it up in Safari 7.0.3 on OS X.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        position: fixed;
        z-index: 100;
        background: red;
      }
      header {
        min-height: 100px;
      }
      p {
        position: relative;
        z-index: 200;
        min-height: 1000px;
        background: blue;
      }
    </style>
  </head>

  <body>
    <header>
      <h1>Title 1</h1>
    </header>
    <p>Open this up in Safari (7.0.3 at time of writing) and scroll down.  The blue box is layered beneath the red header, even though
      it has a higher z-index.  If you resize the browser window, suddenly the layering is correct.  What's up with that?</p>
  </body>

</html>

To investigate next: what else, besides browser resize, will force the z-index layering to be correct?  Modifying the style of the relevant elements (either before scrolling up or after)?   Any repaint (again, either before scrolling up or after)?

“Always the beautiful answer who asks a more beautiful question.”

e.e. cummings, via shapeofdesign

(cheesy, but still…)

AngularJS responsive multi-range slider »

Motivating use-case

I needed a slider that could be used to choose choose a list of probabilities that always add up to 1. I could have used a text input or slider for each probability and link it up so that changing one would update the others, but that’s a fairly clunky interaction. This approach isn’t perfect, but I think it’s better…

Usage

<slider model="arrayOfValues"></slider>

arrayOfValues is an array of numbers: the range values, in order from left to right.

or

<slider model="arrayOfObjects" property="prop"></slider>

arrayOfObjects is an array of objects and prop is the property from which to pull the range value from each object.

Either of these can also take a step attribute, which locks the values into multiples of the given step size.

For styling: the markup generated is a containing div (.slider-control), a div for the actual slider bar (.slider, the js sets position: relative), and an absolutely-positioned div for each handle (.slider-handle). The handles are children of the slider div, and their positioning is a percentage of the slider’s width, so the whole thing should stretch/shrink to fit its containing element. For example:

<div class="slider-control ng-isolate-scope" model="otherProbs">
  <div class="slider" style="position: relative;">
    <div class="slider-handle" style="position: absolute; left: 30%; top: -8px;"></div>
    <div class="slider-handle" style="position: absolute; left: 60%; top: -8px;"></div>
  </div>
</div>

Todo

  • Allow comprehension expressions as a more flexible (and common) alternative to the model/propertyapproach.
  • Option for labeling ranges?

Typograph - Scale & Rhythm »

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. 

This would be useful even just as a beautifully typeset, clearly written introduction to important ideas in typography.  The fact that it also works as a tool for generating base typographic CSS styles is just over the top awesome.