On September 17th 2014, Apple released iOS8 which included the new Safari 8, featuring improved support for CSS Regions. We take this opportunity to highlight the most important changes from the previous version:
- Correct painting of content overflowing the region chain
We completely redesigned the way overflowing content is displayed in regions. Starting with Safari 8, the content is no longer clipped at the region’s content box, but properly overflows the region. Furthermore, using
position:relativeon the flowed content doesn’t affect the way it is fragmented across the region chain.
In Example 1 below, if you hover the orange button, you will notice that using
position:relativeon the content causes it to overflow the regions and be properly painted.
scrollingof content in regions
You can now set the last region in the chain to
overflow:scroll. In such cases, the last region will properly scroll its content. When the scrolling limit is reached, the scroll effect is applied to the region’s container. We created the codepen in Example 2 so you can test this behavior by scrolling the right most region. Besides this, we ensured the
scrollIntoViewmethod now works as expected.
- Improved rendering performance for content inside regions
- With the new Safari, the HTML content requiring hardware acceleration (e.g. video) is rendered using the GPU even when displayed inside regions. This way, if you use CSS Regions for your design, you will not incur any performance penalty.
- Flowing fixed positioned elements into regions
With the new release,
position:fixedelements flowed into regions are spec compliant. They are now correctly sized and positioned relative to the viewport and not the first region in the region chain.
Improved, fully spec compliant
Thanks to the collaboration with our colleagues from Igalia, we managed to improve the way selection of content displayed in regions works. You are now able to combine in a single selection content from a region chain and from outside the region chain. Of course we ensured that, even when combined with CSS Regions, selection is still spec compliant, following the DOM selection. For more information, we highly recommend the blog post from Igalia developer Manuel Rego Casasnovas.
- The WebInspector received some great new features for helping developers use regions. As you can see in Example 3, one of the most obvious additions is the highlighting of the entire region chain and providing information about the flow thread when hovering one of the regions.
These are the major changes related to CSS Regions that you’ll find in Safari 8. We hope you enjoy using regions as much as we enjoyed building it and we’d love to hear your opinion in the comments section below or on our twitter account.