OS X 10.8.4, Firefox 24 und die Scrollbars in der Responsive Design View

Scrollbars in der Responsive Design View liegen über dem SeiteninhaltAls ich am vergangenen Dienstag den frisch auf Version 24 aktualisierten Firefox benutze und mich daran machte, mein aktuelles Projekt in der Responsive Design View zu bearbeiten, wunderte ich mich etwas: Zuvor nebeneinander fließende Elemente brachen mit einem Mal um. Beim Blick in das Layout-Fenster vom Firebug fiel mir auf, dass die Seitenbreite quasi über Nacht von 320 auf 305 Pixel gesunken war. Wie konnte das passieren? Nach ein wenig Grübeln (und einer Tasse Kaffee) kam ich schließlich drauf: Die Scrollbars lagen nicht mehr über dem Inhalt, sondern daneben und beeinträchtigten somit dessen Breite. Äußerst unschön, denn dieses Verhalten stimmt nicht mit mobilen Endgeräten überein in denen Scrollbars über dem Inhalt liegen (mittlerweile ist dieser Bug dokumentiert und soll in Firefox-Version 27 behoben werden).

Ein temporärer Fix für dieses Problem bestand im Addieren von je 15 Pixel zu den entsprechenden Preset-Breiten der Responsive Design View. Etwas umständlicher zwar, aber es funktionierte.

Als ich dieses Problemchen jedoch kurz darauf mit meinen Frontend-Developer-Kollegen besprach, kam eine weitere Lösungsmöglichkeit zu Tage: Und zwar gibt es in den Systemeinstellungen unter Allgemein spezielle Settings für Rollbalken. Dort muss die Option Beim Scrollen aktiviert sein. Dies bewirkt, dass systemweit Scrollbars nur beim tatsächlichen Scrollen eingeblendet werden und dann über dem Fensterinhalt liegen- auch in der Reponsive Design View im Firefox 24.
Scroll-Einstellungen von OS X 10.8.4

Aggressives Firefox-Schriftcaching mit Versionsnummern austricksen

Sämtliche Firefox-Versionen, die ich unter Ubuntu, Windows 7 und Mac OS X benutze, speichern einmal geladene Webfonts sehr aggressiv. Aggressiv bedeutet in diesem Fall, dass ein normales Löschen des Caches zum Neu-Laden der Schrift nicht ausreicht, stattdessen muss zusätzlich noch der Browser neu gestartet werden. Da dies im Entwicklungsprozess doch eher unschön ist, bin ich dazu übergegangen eingebundene Webfonts mit einer Versionsnummer innerhalb des @font-face-Blocks zu versehen. Beim Ändern der Schrift erhöhe ich die Versionsnummer manuell und zwinge Firefox so, die Schrift neu zu laden. Klappt wunderbar und ist wesentlich entwicklerfreundlicher als das Schließen und Wiederöffnen des Browsers.

@font-face {
    font-family: '[Iconfont-Name]';
    src:url('../fonts/[Iconfont-Name]/[Iconfont-Name.eot]?1.0');
    src:url('../fonts/[Iconfont-Name]/[Iconfont-Name.eot]?1.0#iefix') format('embedded-opentype'),
        url('../fonts/[Iconfont-Name]/[Iconfont-Name.woff]?1.0') format('woff'),
        url('../fonts/[Iconfont-Name]/[Iconfont-Name.ttf]?1.0') format('truetype'),
        url('../fonts/[Iconfont-Name]/[Iconfont-Name.svg]?1.0#[Fragmentbezeichner]') format('svg');
    font-weight: normal;
    font-style: normal;
}