chore(release): 1.3.4

.github/workflows/ci.yml

@@ -101,22 +101,26 @@ jobs:
           - os: macos-latest
             name: OSX Safari Stable
             targetBrowser: Safari_Stable
-          - os: macos-latest
+          - os: macos-10.15
             name: iOS Simulator Safari 12
             targetBrowser: Safari_IOS_12
             xcode: /Applications/Xcode_10.3.app
-          - os: macos-latest
+          - os: macos-10.15
             name: iOS Simulator Safari 13
             targetBrowser: Safari_IOS_13
-            xcode: /Applications/Xcode_11.6_beta.app
+            xcode: /Applications/Xcode_11.7.app
-          - os: macos-latest
+          - os: macos-10.15
             name: iOS Simulator Safari 14
             targetBrowser: Safari_IOS_14
-            xcode: /Applications/Xcode_12_beta.app
+            xcode: /Applications/Xcode_12.4.app
+          - os: macos-11
+            name: iOS Simulator Safari 15.0
+            targetBrowser: Safari_IOS_15_0
+            xcode: /Applications/Xcode_13.0.app
           - os: macos-11
             name: iOS Simulator Safari 15
             targetBrowser: Safari_IOS_15
-            xcode: /Applications/Xcode_13.0.app
+            xcode: /Applications/Xcode_13.2.app
           - os: windows-latest
             name: Windows Internet Explorer 9 (Emulated)
             targetBrowser: IE_9

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.3.4](https://github.com/niklasvh/html2canvas/compare/v1.3.3...v1.3.4) (2021-12-29)
+
+
+### ci
+
+* add ios 15.0 testing (#2780) ([d922207](https://github.com/niklasvh/html2canvas/commit/d9222075daaed08884491b0563fc899ee0ced731)), closes [#2780](https://github.com/niklasvh/html2canvas/issues/2780)
+
+### fix
+
+* ios 15 font rendering crash (#2645) ([ba2b1cd](https://github.com/niklasvh/html2canvas/commit/ba2b1cd8e9a9d7932675d7abffce1526a609e769)), closes [#2645](https://github.com/niklasvh/html2canvas/issues/2645)
+
+
+
+## [1.3.3](https://github.com/niklasvh/html2canvas/compare/v1.3.2...v1.3.3) (2021-11-23)
+
+
+### ci
+
+* fix macos action runners (#2757) ([ed57781](https://github.com/niklasvh/html2canvas/commit/ed577815949b6a565df54f2101cf6f0fb731c290)), closes [#2757](https://github.com/niklasvh/html2canvas/issues/2757)
+
+### fix
+
+* "offsets" text when font is big ([fd22a01](https://github.com/niklasvh/html2canvas/commit/fd22a01a3c9e39293f47caaed0c0e13d2dc8170c))
+* const enums (#2651) ([eeda86b](https://github.com/niklasvh/html2canvas/commit/eeda86bd5e81fb4e97675fe9bee3d4d15899997f)), closes [#2651](https://github.com/niklasvh/html2canvas/issues/2651)
+
+
+
 ## [1.3.2](https://github.com/niklasvh/html2canvas/compare/v1.3.1...v1.3.2) (2021-08-15)
 
 
@@ -211,9 +238,14 @@ All notable changes to this project will be documented in this file. See [standa
 
 * update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
 
+### feat
+
+* add support for border-style dashed, dotted, double (#2531) ([72cd528](https://github.com/niklasvh/html2canvas/commit/72cd5284296e4cdb3fe88f2982ec7528604b6618))
+
 ### fix
 
 * opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
+* top right border radius (#2522) ([ba17267](https://github.com/niklasvh/html2canvas/commit/ba172678f07f962e9f54b398df087e86217d7a13))
 
 ### test
 
@@ -361,16 +393,16 @@ All notable changes to this project will be documented in this file. See [standa
  * Fix white space appearing on element rendering (Fix #1438)
  * Reset canvas transform on finish (Fix #1494)
 
-# v1.0.0-alpha.11 - 1.4.2018 
+# v1.0.0-alpha.11 - 1.4.2018
- * Fix IE11 member not found error 
+ * Fix IE11 member not found error
  * Support blob image resources in non-foreignObjectRendering mode
 
-# v1.0.0-alpha.10 - 15.2.2018 
+# v1.0.0-alpha.10 - 15.2.2018
  * Re-introduce `onclone` option (Fix #1434)
  * Add `ignoreElements` predicate function option
  * Fix version console logging
 
-# v1.0.0-alpha.9 - 7.1.2018 
+# v1.0.0-alpha.9 - 7.1.2018
  * Fix dynamic style sheets
  * Fix > 50% border-radius values
 
@@ -382,7 +414,7 @@ All notable changes to this project will be documented in this file. See [standa
  * Fix form input rendering (#1338)
  * Improve word line breaking algorithm
 
-# v1.0.0-alpha.6 - 28.12.2017 
+# v1.0.0-alpha.6 - 28.12.2017
  * Fix list-style: none (#1340)
  * Extend supported values for pseudo element content
 
@@ -392,7 +424,7 @@ All notable changes to this project will be documented in this file. See [standa
  * Fix overflow: auto
  * Added support for rendering list-style
 
- v1.0.0-alpha.4 - 12.12.2017 
+ v1.0.0-alpha.4 - 12.12.2017
  * Fix rendering with multiple fonts defined (Fix #796)
  * Add support for radial-gradients
  * Fix logging option (#1302)
@@ -414,8 +446,8 @@ All notable changes to this project will be documented in this file. See [standa
  ##### Breaking Changes #####
  * Remove deprecated onrendered callback, calling `html2canvas` returns a `Promise<HTMLCanvasElement>`
  * Removed option `type`, same results can be achieved by assigning `x`, `y`, `scrollX`, `scrollY`, `width` and `height` properties.
- 
+
- ## New featues / fixes 
+ ## New featues / fixes
  * Add support for scaling canvas (defaults to device pixel ratio)
  * Add support for multiple text-shadows
  * Add support for multiple text-decorations
@@ -424,7 +456,7 @@ All notable changes to this project will be documented in this file. See [standa
  * Correctly handle px and percentage values in linear-gradients
  * Correctly support all angle types for linear-gradients
  * Add support for multiple values for background-repeat, background-position and background-size
- 
+
 # v0.5.0-beta4 - 23.1.2016
  * Fix logger requiring access to window object
  * Derequire browserify build
@@ -444,11 +476,11 @@ All notable changes to this project will be documented in this file. See [standa
  * Fix transparent colors breaking gradients
  * Preserve scrolling positions on render
 
-# v0.5.0-alpha2 - 3.2.2015 
+# v0.5.0-alpha2 - 3.2.2015
  * Switch to using browserify for building
  * Fix (#517) Chrome stretches background images with 'auto' or single attributes
 
-# v0.5.0-alpha - 19.1.2015 
+# v0.5.0-alpha - 19.1.2015
  * Complete rewrite of library
  * Switched interface to return Promise
  * Uses hidden iframe window to perform rendering, allowing async rendering and doesn't force the viewport to be scrolled to the top anymore.
@@ -459,14 +491,14 @@ All notable changes to this project will be documented in this file. See [standa
  * Changed format for proxy requests, permitting binary responses with CORS headers as well
  * Fixed many layering issues (see z-index tests)
 
-# v0.4.1 - 7.9.2013 
+# v0.4.1 - 7.9.2013
  * Added support for bower
  * Improved z-index ordering
  * Basic implementation for CSS transformations
  * Fixed inline text in top element
  * Basic implementation for text-shadow
 
-# v0.4.0 - 30.1.2013 
+# v0.4.0 - 30.1.2013
  * Added rendering tests with <a href="https://github.com/niklasvh/webdriver.js">webdriver</a>
  * Switched to using grunt for building
  * Removed support for IE<9, including any FlashCanvas bits
@@ -476,7 +508,7 @@ All notable changes to this project will be documented in this file. See [standa
  * Support for placeholder rendering
  * Reformatted all tests to small units to test specific features
 
-# v0.3.4 - 26.6.2012 
+# v0.3.4 - 26.6.2012
 
 * Removed (last?) jQuery dependencies (<a href="https://github.com/niklasvh/html2canvas/commit/343b86705fe163766fcf735eb0217130e4bd5b17">niklasvh</a>)
 * SVG-powered rendering (<a href="https://github.com/niklasvh/html2canvas/commit/67d3e0d0f59a5a654caf71a2e3be6494ff146c75">niklasvh</a>)

karma.conf.js

@@ -34,19 +34,25 @@ module.exports = function(config) {
             base: 'MobileSafari',
             name: 'iPhone 8',
             platform: 'iOS',
-            sdk: '13.6'
+            sdk: '13.7'
         },
         Safari_IOS_14: {
             base: 'MobileSafari',
             name: 'iPhone 8',
             platform: 'iOS',
-            sdk: '14.0'
+            sdk: '14.4'
+        },
+        Safari_IOS_15_0: {
+            base: 'MobileSafari',
+            name: 'iPhone 13',
+            platform: 'iOS',
+            sdk: '15.0'
         },
         Safari_IOS_15: {
             base: 'MobileSafari',
-            name: 'iPhone 8',
+            name: 'iPhone 13',
             platform: 'iOS',
-            sdk: '15.0'
+            sdk: '15.2'
         },
         SauceLabs_IE9: {
             base: 'SauceLabs',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "html2canvas",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

package.json

@@ -6,7 +6,7 @@
   "module": "dist/html2canvas.esm.js",
   "typings": "dist/types/index.d.ts",
   "browser": "dist/html2canvas.js",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",

src/css/property-descriptors/background-clip.ts

@@ -1,7 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
 import {Context} from '../../core/context';
-export enum BACKGROUND_CLIP {
+export const enum BACKGROUND_CLIP {
     BORDER_BOX = 0,
     PADDING_BOX = 1,
     CONTENT_BOX = 2

src/css/property-descriptors/background-repeat.ts

@@ -3,7 +3,7 @@ import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
 import {Context} from '../../core/context';
 export type BackgroundRepeat = BACKGROUND_REPEAT[];
 
-export enum BACKGROUND_REPEAT {
+export const enum BACKGROUND_REPEAT {
     REPEAT = 0,
     NO_REPEAT = 1,
     REPEAT_X = 2,

src/css/property-descriptors/border-style.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum BORDER_STYLE {
+export const enum BORDER_STYLE {
     NONE = 0,
     SOLID = 1,
     DASHED = 2,

src/css/property-descriptors/float.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum FLOAT {
+export const enum FLOAT {
     NONE = 0,
     LEFT = 1,
     RIGHT = 2,

src/css/property-descriptors/font-style.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum FONT_STYLE {
+export const enum FONT_STYLE {
     NORMAL = 'normal',
     ITALIC = 'italic',
     OBLIQUE = 'oblique'

src/css/property-descriptors/list-style-position.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum LIST_STYLE_POSITION {
+export const enum LIST_STYLE_POSITION {
     INSIDE = 0,
     OUTSIDE = 1
 }

src/css/property-descriptors/list-style-type.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum LIST_STYLE_TYPE {
+export const enum LIST_STYLE_TYPE {
     NONE = -1,
     DISC = 0,
     CIRCLE = 1,

src/css/property-descriptors/overflow.ts

@@ -1,7 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
 import {Context} from '../../core/context';
-export enum OVERFLOW {
+export const enum OVERFLOW {
     VISIBLE = 0,
     HIDDEN = 1,
     SCROLL = 2,

src/css/property-descriptors/paint-order.ts

@@ -1,7 +1,7 @@
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {CSSValue, isIdentToken} from '../syntax/parser';
 import {Context} from '../../core/context';
-export enum PAINT_ORDER_LAYER {
+export const enum PAINT_ORDER_LAYER {
     FILL,
     STROKE,
     MARKERS

src/css/property-descriptors/position.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum POSITION {
+export const enum POSITION {
     STATIC = 0,
     RELATIVE = 1,
     ABSOLUTE = 2,

src/css/property-descriptors/text-align.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum TEXT_ALIGN {
+export const enum TEXT_ALIGN {
     LEFT = 0,
     CENTER = 1,
     RIGHT = 2

src/css/property-descriptors/text-transform.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum TEXT_TRANSFORM {
+export const enum TEXT_TRANSFORM {
     NONE = 0,
     LOWERCASE = 1,
     UPPERCASE = 2,

src/css/property-descriptors/visibility.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum VISIBILITY {
+export const enum VISIBILITY {
     VISIBLE = 0,
     HIDDEN = 1,
     COLLAPSE = 2

src/css/types/image.ts

@@ -10,7 +10,7 @@ import {radialGradient} from './functions/radial-gradient';
 import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
 import {Context} from '../../core/context';
 
-export enum CSSImageType {
+export const enum CSSImageType {
     URL,
     LINEAR_GRADIENT,
     RADIAL_GRADIENT
@@ -56,12 +56,12 @@ export interface CSSLinearGradientImage extends ICSSGradientImage {
     type: CSSImageType.LINEAR_GRADIENT;
 }
 
-export enum CSSRadialShape {
+export const enum CSSRadialShape {
     CIRCLE,
     ELLIPSE
 }
 
-export enum CSSRadialExtent {
+export const enum CSSRadialExtent {
     CLOSEST_SIDE,
     FARTHEST_SIDE,
     CLOSEST_CORNER,

src/render/canvas/canvas-renderer.ts

@@ -162,7 +162,7 @@ export class CanvasRenderer extends Renderer {
         const fontVariant = styles.fontVariant
             .filter((variant) => variant === 'normal' || variant === 'small-caps')
             .join('');
-        const fontFamily = styles.fontFamily.join(', ');
+        const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
         const fontSize = isDimensionToken(styles.fontSize)
             ? `${styles.fontSize.number}${styles.fontSize.unit}`
             : `${styles.fontSize.number}px`;
@@ -947,3 +947,12 @@ const canvasTextAlign = (textAlign: TEXT_ALIGN): CanvasTextAlign => {
             return 'left';
     }
 };
+
+// see https://github.com/niklasvh/html2canvas/pull/2645
+const iOSBrokenFonts = ['-apple-system', 'system-ui'];
+
+const fixIOSSystemFonts = (fontFamilies: string[]): string[] => {
+    return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
+        ? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
+        : fontFamilies;
+};

src/render/font-metrics.ts

@@ -27,6 +27,7 @@ export class FontMetrics {
         container.style.fontSize = fontSize;
         container.style.margin = '0';
         container.style.padding = '0';
+        container.style.whiteSpace = 'nowrap';
 
         body.appendChild(container);
 

src/render/path.ts

@@ -1,6 +1,6 @@
 import {BezierCurve} from './bezier-curve';
 import {Vector} from './vector';
-export enum PathType {
+export const enum PathType {
     VECTOR = 0,
     BEZIER_CURVE = 1
 }

tests/reftests/text/lang/chinese.html

@@ -11,6 +11,13 @@
         float: left;
       }
 
+      .apple-system {
+          font-family: -apple-system, Arial;
+      }
+
+      .system-ui {
+          font-family: system-ui, Arial;
+      }
     </style>
   </head>
   <body>
@@ -32,5 +39,7 @@
       </p><p>&nbsp;&nbsp;&nbsp;&nbsp;〔13〕 法捷耶夫（一九○一——一九五六），苏联名作家。他所作的小说《毁灭》于一九二七年出版，内容是描写苏联国内战争时期由苏联远东滨海边区工人、农民和革命知识分子所组成的一支游击队同国内反革命白卫军以及日本武装干涉军进行斗争的故事。这部小说曾由鲁迅译为汉文。
       </p><p>&nbsp;&nbsp;&nbsp;&nbsp;〔14〕 见鲁迅《集外集·自嘲》（《鲁迅全集》第7卷，人民文学出版社1981年版，第147页）。</p>
     </div>
+    <div class="apple-system">中文</div>
+    <div class="system-ui">中文</div>
   </body>
 </html>

tests/reftests/text/text.html

@@ -149,6 +149,6 @@
     <span>[AB / CD]</span>
 </div>
 <div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
-<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
+<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :) ❤️❤️❤️👨‍❤️‍💋‍👨👨‍❤️‍👨</div>
 </body>
 </html>

www/.gitignore

@@ -9,3 +9,5 @@ yarn-error.log
 src/results.json
 static/tests/preview.js
 src/preview.js
+.docusaurus
+build/