fix(capture): keep svg content in screenshots after an empty <style> (19.3.3)

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 19.3.3
+Fixed: charts and other SVG graphics could be missing from screenshots. An empty `<style>` inside an `<svg>` was captured as a stylesheet link to `null`, and the screenshot then dropped everything in the svg after it. Inline style sheets now always stay `<style>` elements; linked style sheets whose rules can't be read are still linked.
+
 ## 19.3.2
 Fixed: screenshots showed dialogs and other content inside iframes as an empty box. The capture now includes the page of every same-origin iframe (frames in frames too, with the same masking and blocking rules) and stores it in the frame's `srcdoc`, so the screenshot shows what the user saw instead of loading the frame's URL without their session. Cross-origin iframes, and frames still loading their `src`, render as before. Canvases inside iframes are captured too. Typed values, scroll positions and canvases inside iframes need the matching screenshot renderer update.
 

package.json

@@ -1,7 +1,7 @@
 {
   "description": "JavaScript and TypeScript SDK for Gleap, an Intercom alternative with AI customer support, live chat, in-app bug reporting and customer feedback.",
   "name": "gleap",
-  "version": "19.3.2",
+  "version": "19.3.3",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

src/ScreenCapture.js

@@ -194,7 +194,8 @@ const replaceStyleNodes = (clone, styleSheet, cssTextContent, styleId) => {
     try {
       if (cloneTargetNode) {
         var replacementNode = null;
-        if (cssTextContent != '') {
+        // An inline sheet (no href) stays a <style>: a <link> inside an <svg> swallows the rest of the svg when re-parsed.
+        if (cssTextContent != '' || !styleSheet.href) {
           // Create node.
           const head = clone.querySelector('head');
           var styleNode = window.document.createElement('style');

src/ScreenCapture.test.js

@@ -982,3 +982,25 @@ describe('startScreenCapture — frames', () => {
     }
   });
 });
+
+describe('startScreenCapture — style sheets', () => {
+  const parse = (html) => new DOMParser().parseFromString(html, 'text/html');
+
+  // jsdom's sheets have no ownerNode, so the capture would skip them; report them as a browser does.
+  const reportStyleSheets = (sheets) =>
+    Object.defineProperty(document, 'styleSheets', { configurable: true, get: () => sheets });
+
+  afterEach(() => {
+    delete document.styleSheets;
+  });
+
+  test('a style element without rules stays a style element, so the svg content after it still shows', async () => {
+    document.body.innerHTML = '<svg id="chart"><style></style><rect id="bar"></rect></svg>';
+    const style = document.querySelector('#chart > style');
+    reportStyleSheets([{ ownerNode: style, href: null, type: 'text/css', media: { mediaText: '' }, cssRules: [] }]);
+
+    const html = (await startScreenCapture(true)).html;
+
+    expect(parse(html).querySelector('#chart > #bar')).not.toBeNull();
+  });
+});