firka/flutter
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Fixes IE11 crash due to missing canvas ellipse support and font polyfill failure (flutter/engine#16965)

Browse Source 
* Add context ellipse polyfill
* Change call sites for ellipse
* Switch fontloader polyfill font for ie11
This commit is contained in:
Ferhat
2020-03-06 09:50:02 -08:00
committed by GitHub
parent 56309c96cf
commit d6a38fbd6f
4 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
engine/src/flutter/lib/web_ui/lib/src/engine/canvas_pool.dart
View File

@@ -503,7 +503,7 @@ class _CanvasPool extends _SaveStackTracking {
break;
case PathCommandTypes.ellipse:
final Ellipse ellipse = command;
ctx.ellipse(
DomRenderer.ellipse(ctx,
ellipse.x,
ellipse.y,
ellipse.radiusX,
@@ -563,14 +563,14 @@ class _CanvasPool extends _SaveStackTracking {
void drawOval(ui.Rect rect, ui.PaintingStyle style) {
context.beginPath();
context.ellipse(rect.center.dx, rect.center.dy, rect.width / 2,
DomRenderer.ellipse(context, rect.center.dx, rect.center.dy, rect.width / 2,
rect.height / 2, 0, 0, 2.0 * math.pi, false);
contextHandle.paint(style);
}
void drawCircle(ui.Offset c, double radius, ui.PaintingStyle style) {
context.beginPath();
context.ellipse(c.dx, c.dy, radius, radius, 0, 0, 2.0 * math.pi, false);
DomRenderer.ellipse(context, c.dx, c.dy, radius, radius, 0, 0, 2.0 * math.pi, false);
contextHandle.paint(style);
}

20
engine/src/flutter/lib/web_ui/lib/src/engine/dom_renderer.dart
View File

@@ -489,6 +489,26 @@ flt-glass-pane * {
}
}
static bool _ellipseFeatureDetected;
/// Draws CanvasElement ellipse with fallback.
static void ellipse(html.CanvasRenderingContext2D context,
double centerX, double centerY, double radiusX, double radiusY,
double rotation, double startAngle, double endAngle, bool antiClockwise) {
_ellipseFeatureDetected ??= js_util.getProperty(context, 'ellipse') != null;
if (_ellipseFeatureDetected) {
context.ellipse(centerX, centerY, radiusX, radiusY,
rotation, startAngle, endAngle, antiClockwise);
} else {
context.save();
context.translate(centerX, centerY);
context.rotate(rotation);
context.scale(radiusX, radiusY);
context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
context.restore();
}
}
/// The element corresponding to the only child of the root surface.
html.Element get _rootApplicationElement {
final html.Element lastElement = rootElement.children.last;

2
engine/src/flutter/lib/web_ui/lib/src/engine/rrect_renderer.dart
View File

@@ -196,7 +196,7 @@ class _RRectToCanvasRenderer extends _RRectRenderer {
void ellipse(double centerX, double centerY, double radiusX, double radiusY,
double rotation, double startAngle, double endAngle, bool antiClockwise) {
context.ellipse(centerX, centerY, radiusX, radiusY, rotation, startAngle,
DomRenderer.ellipse(context, centerX, centerY, radiusX, radiusY, rotation, startAngle,
endAngle, antiClockwise);
}
}

12
engine/src/flutter/lib/web_ui/lib/src/engine/text/font_collection.dart
View File

@@ -245,7 +245,9 @@ class _PolyfillFontManager extends FontManager {
paragraph.style.position = 'absolute';
paragraph.style.visibility = 'hidden';
paragraph.style.fontSize = '72px';
paragraph.style.fontFamily = 'sans-serif';
final String fallbackFontName = browserEngine == BrowserEngine.ie11 ?
'Times New Roman' : 'sans-serif';
paragraph.style.fontFamily = fallbackFontName;
if (descriptors['style'] != null) {
paragraph.style.fontStyle = descriptors['style'];
}
@@ -257,7 +259,7 @@ class _PolyfillFontManager extends FontManager {
html.document.body.append(paragraph);
final int sansSerifWidth = paragraph.offsetWidth;
paragraph.style.fontFamily = "'$family', sans-serif";
paragraph.style.fontFamily = "'$family', $fallbackFontName";
final Completer<void> completer = Completer<void>();
@@ -269,8 +271,10 @@ class _PolyfillFontManager extends FontManager {
completer.complete();
} else {
if (DateTime.now().difference(_fontLoadStart) > _fontLoadTimeout) {
completer.completeError(
Exception('Timed out trying to load font: $family'));
// Let application waiting for fonts continue with fallback.
completer.complete();
// Throw unhandled exception for logging.
throw Exception('Timed out trying to load font: $family');
} else {
Timer(_fontLoadRetryDuration, _watchWidth);
}