kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-03-27 22:55:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] CSS animation insertion for Android 5.1 HuaWei browser

Browse Source 
Inserting unprefixed CSS keyframes rules causes a `SYNTAX_ERR: DOM Exception
12` error in Android 5.1. A similar issue with inserting rules containing
vendor-prefixed pseudo-selectors was patched by wrapping rule in `@media all
{}` blocks. This patch removes the media query wrapper from keyframe animations
(as it doesn't prevent the error) and relies on `CSSStyleSheet::insertRule`
being called within a try-catch block.

Fix #1199
Close #1210
This commit is contained in:
Nicolas Gallagher
2018-12-21 15:13:11 +00:00
parent ada5651be2
commit 34d8160a43
3 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react-native-web/src/exports/StyleSheet/WebStyleSheet.js vendored
View File

@@ -55,7 +55,15 @@ export default class WebStyleSheet {
// doesn't include styles injected via 'insertRule')
if (this._textContent.indexOf(rule) === -1 && this._sheet) {
const pos = position || this._sheet.cssRules.length;
this._sheet.insertRule(rule, pos);
try {
this._sheet.insertRule(rule, pos);
} catch (e) {
if (process.env.NODE_ENV !== 'production') {
console.warn(
`Failed to inject CSS: "${rule}". The browser may have rejecting unrecognized vendor prefixes. (This should have no user-facing impact.)`
);
}
}
}
}
}

8
packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createAtomicRules.js.snap
View File

@@ -2,10 +2,10 @@
exports[`StyleSheet/createAtomicRules transforms custom "animationName" declaration 1`] = `
Array [
"@media all {@-webkit-keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}}",
"@media all {@keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}}",
"@media all {@-webkit-keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}}",
"@media all {@keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}}",
"@-webkit-keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
"@keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
"@-webkit-keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
"@keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
".test{-webkit-animation-name:rn-anim-2k74q5,rn-anim-zc91cv;animation-name:rn-anim-2k74q5,rn-anim-zc91cv}",
]
`;

2
packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js vendored
View File

@@ -29,7 +29,7 @@ const makeSteps = keyframes =>
const createKeyframesRules = (keyframes: Object): Array<String> => {
const identifier = createIdentifier(keyframes);
const rules = prefixes.map(prefix => {
return `@media all {@${prefix}keyframes ${identifier}{${makeSteps(keyframes)}}}`;
return `@${prefix}keyframes ${identifier}{${makeSteps(keyframes)}}`;
});
return { identifier, rules };
};