Zooming out on Canvas Element(s) causes Cropping in Replays #15317

Closed as not planned
Closed as not planned
Zooming out on Canvas Element(s) causes Cropping in Replays#15317
Labels
BrowserBugExplore > Replays

Description

@ReneGreen27
ReneGreen27
opened on Jan 17, 2025

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

This is being seen in a React project on latest SDK version (8.48.0)

This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.

You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.

The element in question is a canvas and are confirmed to be snapshotting per the documentation.

Expected Result

For the replay to correct capture the zooming out of the canvas element(s).

Actual Result

Example replays and user view recordings can be found in internal ticket #142417

Product Area

Replays

Link

No response

DSN

No response

Version

No response

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BrowserBugExplore > Replays

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
     blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

    Skip to content
    Zooming out on Canvas Element(s) causes Cropping in Replays #15317
    Closed as not planned
    Closed as not planned
    Zooming out on Canvas Element(s) causes Cropping in Replays#15317
    Labels
    BrowserBugExplore > Replays
    Description
    @ReneGreen27
    ReneGreen27
    opened on Jan 17, 2025
    Environment
    SaaS (https://sentry.io/)
    Steps to Reproduce
    This is being seen in a React project on latest SDK version (8.48.0)
    This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
    You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
    The element in question is a canvas and are confirmed to be snapshotting per the documentation.
    Expected Result
    For the replay to correct capture the zooming out of the canvas element(s).
    Actual Result
    Example replays and user view recordings can be found in internal ticket #142417
    Product Area
    Replays
    Link
    No response
    DSN
    No response
    Version
    No response
    Activity
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Metadata
    Metadata
    Assignees
    No one assigned
      Labels
      BrowserBugExplore > Replays
      Projects
      Milestone
      No milestone
      Relationships
      None yet
      Development
      No branches or pull requests
      Issue actions
      
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

      Skip to content
      Zooming out on Canvas Element(s) causes Cropping in Replays #15317
      Closed as not planned
      Closed as not planned
      Zooming out on Canvas Element(s) causes Cropping in Replays#15317
      Labels
      BrowserBugExplore > Replays
      Description
      @ReneGreen27
      ReneGreen27
      opened on Jan 17, 2025
      Environment
      SaaS (https://sentry.io/)
      Steps to Reproduce
      This is being seen in a React project on latest SDK version (8.48.0)
      This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
      You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
      The element in question is a canvas and are confirmed to be snapshotting per the documentation.
      Expected Result
      For the replay to correct capture the zooming out of the canvas element(s).
      Actual Result
      Example replays and user view recordings can be found in internal ticket #142417
      Product Area
      Replays
      Link
      No response
      DSN
      No response
      Version
      No response
      Activity
      Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
      Metadata
      Metadata
      Assignees
      No one assigned
        Labels
        BrowserBugExplore > Replays
        Projects
        Milestone
        No milestone
        Relationships
        None yet
        Development
        No branches or pull requests
        Issue actions
        
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

        Skip to content
        Zooming out on Canvas Element(s) causes Cropping in Replays #15317
        Closed as not planned
        Closed as not planned
        Zooming out on Canvas Element(s) causes Cropping in Replays#15317
        Labels
        BrowserBugExplore > Replays
        Description
        @ReneGreen27
        ReneGreen27
        opened on Jan 17, 2025
        Environment
        SaaS (https://sentry.io/)
        Steps to Reproduce
        This is being seen in a React project on latest SDK version (8.48.0)
        This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
        You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
        The element in question is a canvas and are confirmed to be snapshotting per the documentation.
        Expected Result
        For the replay to correct capture the zooming out of the canvas element(s).
        Actual Result
        Example replays and user view recordings can be found in internal ticket #142417
        Product Area
        Replays
        Link
        No response
        DSN
        No response
        Version
        No response
        Activity
        Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
        Metadata
        Metadata
        Assignees
        No one assigned
          Labels
          BrowserBugExplore > Replays
          Projects
          Milestone
          No milestone
          Relationships
          None yet
          Development
          No branches or pull requests
          Issue actions
          
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

          Skip to content
          Zooming out on Canvas Element(s) causes Cropping in Replays #15317
          Closed as not planned
          Closed as not planned
          Zooming out on Canvas Element(s) causes Cropping in Replays#15317
          Labels
          BrowserBugExplore > Replays
          Description
          @ReneGreen27
          ReneGreen27
          opened on Jan 17, 2025
          Environment
          SaaS (https://sentry.io/)
          Steps to Reproduce
          This is being seen in a React project on latest SDK version (8.48.0)
          This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
          You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
          The element in question is a canvas and are confirmed to be snapshotting per the documentation.
          Expected Result
          For the replay to correct capture the zooming out of the canvas element(s).
          Actual Result
          Example replays and user view recordings can be found in internal ticket #142417
          Product Area
          Replays
          Link
          No response
          DSN
          No response
          Version
          No response
          Activity
          Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
          Metadata
          Metadata
          Assignees
          No one assigned
            Labels
            BrowserBugExplore > Replays
            Projects
            Milestone
            No milestone
            Relationships
            None yet
            Development
            No branches or pull requests
            Issue actions
            
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

            Skip to content
            Zooming out on Canvas Element(s) causes Cropping in Replays #15317
            Closed as not planned
            Closed as not planned
            Zooming out on Canvas Element(s) causes Cropping in Replays#15317
            Labels
            BrowserBugExplore > Replays
            Description
            @ReneGreen27
            ReneGreen27
            opened on Jan 17, 2025
            Environment
            SaaS (https://sentry.io/)
            Steps to Reproduce
            This is being seen in a React project on latest SDK version (8.48.0)
            This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
            You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
            The element in question is a canvas and are confirmed to be snapshotting per the documentation.
            Expected Result
            For the replay to correct capture the zooming out of the canvas element(s).
            Actual Result
            Example replays and user view recordings can be found in internal ticket #142417
            Product Area
            Replays
            Link
            No response
            DSN
            No response
            Version
            No response
            Activity
            Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
            Metadata
            Metadata
            Assignees
            No one assigned
              Labels
              BrowserBugExplore > Replays
              Projects
              Milestone
              No milestone
              Relationships
              None yet
              Development
              No branches or pull requests
              Issue actions
              
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

              Skip to content
              Zooming out on Canvas Element(s) causes Cropping in Replays #15317
              Closed as not planned
              Closed as not planned
              Zooming out on Canvas Element(s) causes Cropping in Replays#15317
              Labels
              BrowserBugExplore > Replays
              Description
              @ReneGreen27
              ReneGreen27
              opened on Jan 17, 2025
              Environment
              SaaS (https://sentry.io/)
              Steps to Reproduce
              This is being seen in a React project on latest SDK version (8.48.0)
              This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
              You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
              The element in question is a canvas and are confirmed to be snapshotting per the documentation.
              Expected Result
              For the replay to correct capture the zooming out of the canvas element(s).
              Actual Result
              Example replays and user view recordings can be found in internal ticket #142417
              Product Area
              Replays
              Link
              No response
              DSN
              No response
              Version
              No response
              Activity
              Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
              Metadata
              Metadata
              Assignees
              No one assigned
                Labels
                BrowserBugExplore > Replays
                Projects
                Milestone
                No milestone
                Relationships
                None yet
                Development
                No branches or pull requests
                Issue actions
                
, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

                Skip to content
                Zooming out on Canvas Element(s) causes Cropping in Replays #15317
                Closed as not planned
                Closed as not planned
                Zooming out on Canvas Element(s) causes Cropping in Replays#15317
                Labels
                BrowserBugExplore > Replays
                Description
                @ReneGreen27
                ReneGreen27
                opened on Jan 17, 2025
                Environment
                SaaS (https://sentry.io/)
                Steps to Reproduce
                This is being seen in a React project on latest SDK version (8.48.0)
                This occurs when a user zooms out in their browser - ie holding down control and using their moses wheel to zoom out.
                You will then see in the associated replays that the captured canvas displays zoomed out incorrectly in the player.
                The element in question is a canvas and are confirmed to be snapshotting per the documentation.
                Expected Result
                For the replay to correct capture the zooming out of the canvas element(s).
                Actual Result
                Example replays and user view recordings can be found in internal ticket #142417
                Product Area
                Replays
                Link
                No response
                DSN
                No response
                Version
                No response
                Activity
                Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
                Metadata
                Metadata
                Assignees
                No one assigned
                  Labels
                  BrowserBugExplore > Replays
                  Projects
                  Milestone
                  No milestone
                  Relationships
                  None yet
                  Development
                  No branches or pull requests
                  Issue actions