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.
<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>
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)?
If a medical test is 99% accurate, does that mean that you should be 99% sure of its result? Weirdly, the answer is NO.
“Always the beautiful answer who asks a more beautiful question.”
e.e. cummings, via shapeofdesign
(cheesy, but still…)
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…
arrayOfValues is an array of numbers: the range values, in order from left to right.
<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 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>
- Allow comprehension expressions as a more flexible (and common) alternative to the
- Option for labeling ranges?
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.