# compatible

Skyline's current support for each end is shown in the table below

As you can see, if Weixin Mini Program is not only running on the latest version of WeChat mobile, you need to pay attention to WebView compatibility, and here we have a list of compatibility methods and common compatibility issues.

# Compatibility approaches

# Style Compatibility

The main difference between Skyline and WebView is style support, so much of the compatibility work is focused on style adaptation, where you can use the developer's WXML debugging tool to locate the problem node and analyze the corresponding style compatibility.

On the policy of compatibility with specific styles, because the default values of some styles in Skyline are different from the web, the styles omitted by using the default values need to be specified, such asflex-direction: row, but it is recommended here Turn on the default Block layout and Default ContentBox model . Default value processing is closer to the web. For more information, see Skyline WXSS Style Support and Variations

# Compatible with different renderer

Sometimes, simply using WXML and WXSS can not do a good job of compatibility, you can judge by JS whether Skyline to use a different WXML or WXSS implementation.We have added therenderermember to the page or component instance with the valuewebvieworskyline, refer to the following code

<view class="position {{renderer}}"></view>

.position {
    position: fixed;
}
.position.skyline {
    position: absolute;
}

Page({
    data: {
        renderer: 'webview'
    },
    onLoad() {
        this.setData({
            renderer: this.renderer,
        })
    },
})

# Common Compatibility Issues

• Does Skyline necessarily need to be applied to the entire Weixin Mini Program?

  No, Skyline supports opening by page granularity or subcontract granularity for progressive migration.

• The layout is messed up after opening Skyline

  Generally the default flex layout and box-sizing default to border-box causes, **Recommends that developers turn on default Block layout and Default ContentBox box model ** .

• After switching Skyline, why does the top native navigation bar disappear?

  It does not support native navigation rails and needs to be implemented by itself, or use the weui component library .Recommended page configuration plus "navigationStyle": "custom" for WebView compatibility

• After switching Skyline, why is position: absolute relative coordinates inaccurate?

  In Skyline mode, all nodes are relative by default, which may result in incorrect absolute relative coordinates. Developers are advised to modify the node position or modify the relative coordinates.

• Multiple paragraphs of text cannot be inlined

  Because theinlinelayout is not supported, you need to implement it in a flex layout, or use the text component to wrap multiple paragraphs of text instead of the view component, or use a span component to Wrap a hybrid text and image inline.Like ']] 、 `

• The omitted style for a single line of text fails

  Text-overflow: ellipseonly works on the text component, not on the view component, and needs to declarewhite-space: nowrapandoverflow: hidden, it is recommended to use

• The omitted style for multiple lines of text fails

  On the basis of a single line of text omission, set the maximum number of lines through themax-linesproperty of the text component, i.e.

• Z-index is abnormal

  This is due to the fact that Skyline does not support the web standard stacked context, andz-indexis effective only before nodes of the same level, and the values can be adjusted depending on the actual situation

• The weui extension library is not available

  The platform is supporting the extension library and is expected to be online in the near future.Developers are advised to use npm to install the weui component libraryAfter , replace the miniprogram_dist under node_modules / weui-miniprogram with the miniprogram-dist in the link in and build npm in the WeChat development tool.

• Component animate interface is not supported

  Component animate interface is not supported.To achieve this effect, you can use the worklet animation mechanism

• SVG rendering is incorrect

  The SVG on Skyline does not support selector matching and can be converted to inline by itself; Does not support RGBA format, can be replaced with fill-opacity;Recommended optimization with SVGO online tool

• The style of a custom component is not present correctly

  • Watch for style matching across custom components. Tag and id selectors in Skyline do not support cross-custom component matching.Class follows the component style isolation mechanism and can turn on global tag selector matching to align with older behavior.

• WebView scroll-view horizontal scrolling does not take effect

  Horizontal scrolling requires enable-flex to be enabled for WebView compatibility, while scroll-view adds styledisplay: flex; flex-direction: row;, scroll-view child node adds styleflex-shrink: 0;

• Why does boundingClientRect not execute when scroll-view contains more content?

  Because the direct sub-nodes of scroll-view (first-tier nodes) are rendered on demand, i.e. the direct sub nodes are not rendered when the screen is not there, and the node size cannot be obtained, so when boundingClientRect is obtained via query.selectAll, the node sizes cannot be immediately obtained, and only obtained when all the nodes are rendered. It is recommended that developers try to adjust the boundingClientRect to get nodes one by one.

• After switching Skyline, why does map / canvas / video / camera fail to render in WeChat developer tools?

  In Skyline mode, the WeChat developer tools do not support debugging native components at this time, and developers are advised to use live preview to complete debugging.

• Why is WeChat Developer Tools hot overload unresponsive in Skyline mode?

  Currently Skyline mode does not support hot overloading, it is recommended to turn off hot overloading and recompile to preview the rendering results. The subsequent platform will support heat loading capabilities.