![]() ![]() This will avoid the need to scroll and also makes the transitions a bit smoother. In general, we recommend that you place the buttons that open the panel at the very top of the screen which is the most common UI pattern for panels. If the panel contents are too long to fit within the viewport, the framework will simply display the panel without fixed positioning. The framework also checks to see if the panel contents will fit within the viewport before applying the fixed positioning because this property would prevent the panel contents from scrolling and using overflow is not well supported enough to use at this time. You can set a panel to position:fixed, so its contents will appear no matter how far down the page you're scrolled, by adding the data-position-fixed="true" attribute to the panel. ![]() When a panel is opened the framework checks to see if the bottom of the panel contents is in view and, if not, scrolls to the top of the page. The panel will be displayed with the position:absolute CSS property, meaning it will scroll with the page. Because this increases memory use you have to be aware of performance issues if you use long lists or scripts to dynamically inject content on a page with an animated panel. The use of hardware acceleration is triggered during initialization of the page to prevent blinks when opening a panel. To turn off animations via markup, add the data-animate="false" attribute to the panel container. The animate option allows you to turn off panel animations for all devices. ![]() After thorough testing, we decided to not animate panels on less capable platforms because the choppier animations weren't a better experience than a simple hide/show. The framework has a feature test to detect if the required CSS properties are supported and will fall back to a simple hide/show if not available. Panel animations use translateX CSS transforms to ensure they are hardware accelerated and smooth. The presence of such support is established by the same criteria for CSS animation support we use for page transitions. Panels will animate if the browser supports 3D transforms. To resolve this you have to set the following rule for the element or its container: The CSS that is used to do this can cause issues with buttons and form elements on the page if their container has a CSS multi-column layout ( column-count). To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. ![]() Be aware of the fact that all your visible page content should live inside those page sections. Those are not included in the wrapper, but will transition in sync with it. An exception is fixed headers and footers. When opening a panel with display mode "reveal" or "push" the transition is applied to this wrapper. If a page contains a panel the framework wraps the header, content and footer sections in a div. Where in the source order you place the panel markup will depend on how you want to page content to read for people experiencing the page in a C-grade device (HTML only) or for a screen reader. Alternately, it's possible to add the panel markup after the header, content and footer in the source order, just before the end of the page container. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |