jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/379741 )
Change subject: Chore: Fix SVG rendering misbehaving on Safari ...................................................................... Chore: Fix SVG rendering misbehaving on Safari Both on desktop and iOS, the wordmark SVG specifically would some times turn the paths into fully filled rectangles. Apparently, the <base> tag affects the SVG imports with url and others, breaking them. Sources: * https://stackoverflow.com/a/18265336/1400662 * https://github.com/bodymovin/bodymovin/issues/360 * https://www.w3.org/2015/08/25-svg-minutes.html#item08 * https://github.com/angular/angular.js/issues/8934 This change removes the <base> tag, and fixes the production configuration for webpack so that the assets build and are loaded fine on nested paths. The issue was that absolute paths were used implicitly on manifest.ts by adding a "/" to the assets-manifest.json entries, without webpack knowing about it. As such, when trying to load assets dynamically (dynamic imports) webpack wouldn't know about the "/". That root marker has been moved to webpack's configuration.publicPath when compiling for production, so that the assets manifest includes the proper root "/" and the dynamic import loading mechanism also knows about it. Tested in development and production mode, by loading the style guide for example both from the server, and from a different page navigating to it on the client. Bug: T173022 Change-Id: I432e549e24659f38171fc45c8b2d29cdef88b638 --- M src/server/assets/manifest.ts M src/server/components/html-page.tsx M webpack.config.ts 3 files changed, 5 insertions(+), 5 deletions(-) Approvals: Niedzielski: Looks good to me, approved jenkins-bot: Verified diff --git a/src/server/assets/manifest.ts b/src/server/assets/manifest.ts index 9ce6079..005a438 100644 --- a/src/server/assets/manifest.ts +++ b/src/server/assets/manifest.ts @@ -21,7 +21,7 @@ }: AssetParameters): string => typeof manifest === "string" ? `${manifest}/public/${entry}.${extension}` - : `/${manifest[entry][extension]}`; + : `${manifest[entry][extension]}`; // Note: scripts must be included in the correct order: runtime, vendor, index. // Example errors: diff --git a/src/server/components/html-page.tsx b/src/server/components/html-page.tsx index 449aeb2..8d7f1be 100644 --- a/src/server/components/html-page.tsx +++ b/src/server/components/html-page.tsx @@ -24,7 +24,6 @@ <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>{title ? `${title} - ` : ""}Marvin</title> - <base href="/" /> <link rel="stylesheet" href={style(manifest)} /> {assets.map(path => ( <link rel="preload" href={path} {...{ as: "script" }} /> diff --git a/webpack.config.ts b/webpack.config.ts index 2ec0296..14734f7 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -77,9 +77,10 @@ // The base web request path for chunk files to appear in the asset // manifest. This is just a prefix, not a filename join, so a trailing slash - // is necessary. For production, use a relative path. For development, use - // the Webpack development server. - publicPath: PRODUCTION ? "public/" : `${WEBPACK_DEV_SERVER_URL}/public/`, + // is necessary. For production, use an absolute path for assets to load + // fine in nested pathnames. For development, use the Webpack development + // server. + publicPath: PRODUCTION ? "/public/" : `${WEBPACK_DEV_SERVER_URL}/public/`, // `configuration.entry` chunk filenames. e.g.: // -- To view, visit https://gerrit.wikimedia.org/r/379741 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I432e549e24659f38171fc45c8b2d29cdef88b638 Gerrit-PatchSet: 2 Gerrit-Project: marvin Gerrit-Branch: master Gerrit-Owner: Jhernandez <[email protected]> Gerrit-Reviewer: Niedzielski <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
