Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Regions: Moving further with iOS8

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:relative on 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:relative on the content causes it to overflow the regions and be properly painted.

See the Pen dhvzn by Adobe Web Platform (@adobe) on CodePen.

Example 1

Improved scrolling of 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 scrollIntoView method now works as expected.

See the Pen HoKwC by Adobe Web Platform (@adobe) on CodePen.

Example 2

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:fixed elements 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 selection
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.

WebInspector integration
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.

Regions WebInspector sample

Example 3

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.

2 Comments

  1. October 08, 2014 at 7:00 am, Ahmed Hashem said:

    There is a bug in regios on iOS 8 where table rows do not split between regions. The second half of the row in the regions doesn’t render. Hope it is fixed soon

  2. October 08, 2014 at 7:33 am, Radu Stavila said:

    Hi Ahmed,

    Thanks for the feedback. If you can, please log the problem in bugs.webkit.org and also attach an example html.