Known issues
Flexbox
CSS Flexbox is a layout mode that offers an alternative to traditional methods for positioning like floats. It provides a more efficient way to lay out, align and distribute items in a container. Blokks uses Flexbox to define the overall appearance of the embedded timetable.
Flexbox is supported by all modern browsers. Only older Android browsers and Internet Explorer 8-9 lack support.
Supported by: Chrome 49+ Edge 12+ Internet Explorer 10+ Firefox 31+ Safari 6.1+
Sticky headers
Position: sticky is a CSS property that allow elements to stick to the viewport edge as you scroll past them.
Blokks implements sticky headers as a progressive enhancement. This means that if your browser does not support sticky headers, they simply won’t stick. No polyfill or fallback is required.
Please note that there are limitations to sticky headers. For example, they will not work inside elements with overflow: scroll or auto. Therefore, headers will not stick if local scrolling is enabled.
Supported by: Chrome 58+ Edge 16+ Firefox32+ Safari 7+
CSS Variables
Blokks allows for easy customization through its use of CSS Variables. With these, it’s quite easy to, for example, change colors and add custom fonts.
CSS Variables are supported by all major browsers, including Microsoft Edge. However, Internet Explorer does not support them yet. A great solution for this is to use CSS classes.
Supported by: Chrome 49+ Edge 15+ Firefox 31+ Safari 9.1+
Promises
Blokks uses Promises extensively to handle so called async operations. What they are and what they do is beyond the scope of this page. What you should know is that they aren’t supported by Internet Explorer. Luckily, adding the Promise polyfill will fix this.
If you want to know more about Promises, this article will bring you up to speed.
Supported by: Chrome 33+ Edge 12+ Firefox 29+ Safari 7.1+
MatchMedia
MatchMedia is an API for finding out whether or not a media query applies to the document. Blokks uses MatchMedia to change layout when switching between mobile and desktop.
There is a polyfill available if you need to support Internet Explorer 9 and lower.
Supported by: Chrome 9+ Edge 12+ IE10+ Firefox 6+ Safari 5.1+
Modals
Support for overflow: hidden; on the <body> element is limited on iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <body> content will begin to scroll. See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.