{"action":"closed","issue":{"url":"https://api.github.com/repos/mozilla/pdf.js/issues/8837","repository_url":"https://api.github.com/repos/mozilla/pdf.js","labels_url":"https://api.github.com/repos/mozilla/pdf.js/issues/8837/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/pdf.js/issues/8837/comments","events_url":"https://api.github.com/repos/mozilla/pdf.js/issues/8837/events","html_url":"https://github.com/mozilla/pdf.js/issues/8837","id":253570511,"number":8837,"title":"Problem with PDF background image in Macbook pro retina screen (Chrome)","user":{"login":"Huespal","id":4157755,"avatar_url":"https://avatars0.githubusercontent.com/u/4157755?v=4","gravatar_id":"","url":"https://api.github.com/users/Huespal","html_url":"https://github.com/Huespal","followers_url":"https://api.github.com/users/Huespal/followers","following_url":"https://api.github.com/users/Huespal/following{/other_user}","gists_url":"https://api.github.com/users/Huespal/gists{/gist_id}","starred_url":"https://api.github.com/users/Huespal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Huespal/subscriptions","organizations_url":"https://api.github.com/users/Huespal/orgs","repos_url":"https://api.github.com/users/Huespal/repos","events_url":"https://api.github.com/users/Huespal/events{/privacy}","received_events_url":"https://api.github.com/users/Huespal/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-08-29T08:36:23Z","updated_at":"2017-08-29T12:35:33Z","closed_at":"2017-08-29T12:35:33Z","body":"Link to PDF file (or attach file here): \r\nDropbox 'Getting Started.pdf' PDF -> https://www.dropbox.com/s/zwfzuaampxim8bi/Getting%20Started.pdf?dl=0\r\n\r\nConfiguration:\r\n- Web browser and its version: Chrome 60.0.3112.101.\r\n- Operating system and its version: macOS Sierra 10.12.6\r\n- PDF.js version: 1.8.571\r\n- Is an extension: Is the pdfjs-dist npm.\r\nThe project is using Angular 1.x JS Framework.\r\n\r\nSteps to reproduce the problem:\r\n1. Upload a pdf with a background image, like the default Dropbox PDF, using pdfjs library in an angular 1.x project, in Chrome on a macOS.\r\n2. Render it in the Mac screen.\r\n\r\nWhat is the expected behavior? (add screenshot)\r\n\r\nA well perfectly scaled blue Dropbox box in background image. Like in the real life.\r\n\r\n![screen shot 2017-08-29 at 10 13 24](https://user-images.githubusercontent.com/4157755/29812377-9ac09c28-8ca6-11e7-9721-6556bf0cdbc8.png)\r\n\r\n\r\nWhat went wrong? (add screenshot)\r\n\r\nBad scaled background Dropbox box image. Background is rendered as if CSS styles or canvas width, height are not applying, is my first idea. But I don't know exactly. It fails only in this configuration. Works in FF in all OS. Works in Chrome both in ubuntu and windows. Works in Mac in another screen. I can only reproduce the bug in the Macbook pro default retina display. Which is important because the target of people using macbook pro screen and chrome is huge.\r\n\r\n<img width=\"491\" alt=\"screen shot 2017-08-29 at 10 39 17\" src=\"https://user-images.githubusercontent.com/4157755/29812380-9e5c8f68-8ca6-11e7-9d51-cd9ae4ad2a16.png\">\r\n\r\n\r\nCanvas dimensions I'm applying:\r\n\r\n```\r\n /**\r\n         * @desc\r\n         *  Sets canvas dimension\r\n         * @param {Object} canvas - The canvas object.\r\n         * @param {number} w - Canvas width.\r\n         * @param {number} h - Canvas height.\r\n         */\r\n        let setCanvasDimensions = function(canvas, w, h) {\r\n            let ratio = backingScale(canvas);\r\n            canvas.width = Math.floor(w * ratio);\r\n            canvas.height = Math.floor(h * ratio);\r\n            canvas.style.width = Math.floor(w) + 'px';\r\n            canvas.style.height = Math.floor(h) + 'px';\r\n            canvas.getContext('2d').setTransform(ratio, 0, 0, ratio, 0, 0);\r\n            return canvas;\r\n        };\r\n\r\n     /**\r\n         * @desc\r\n         *  Backing on scale.\r\n         * @param {Object} canvas - The canvas object.\r\n         * @returns {number}\r\n         */\r\n    let backingScale        = function(canvas) {\r\n            let ctx = canvas.getContext('2d');\r\n            let dpr = window.devicePixelRatio || 1;\r\n            let bsr = ctx.webkitBackingStorePixelRatio ||\r\n                ctx.mozBackingStorePixelRatio ||\r\n                ctx.msBackingStorePixelRatio ||\r\n                ctx.oBackingStorePixelRatio ||\r\n                ctx.backingStorePixelRatio || 1;\r\n\r\n            return dpr / bsr;\r\n        };\r\n```\r\n\r\n\r\nThe best part: \r\n**It just happens every first time PDF is rendered in page load.** Page 1 is first rendered, and fails. If I go to the next PDF page, 2, page renders ok. Going going back to the page 1, now is ok. Same exact function is called for every page: \r\n\r\n\r\n ```\r\n// canvas and ctx are set globally. I put here to better understand code.\r\nlet canvas = document.getElementById('pdf-canvas');\r\nlet ctx = canvas.getContext('2d');\r\npdfDoc.getPage(num).then(function(page) {\r\n                        let viewport, pageWidthScale, renderContext;                        \r\n                        viewport = page.getViewport(scale); // scale = 0.8.\r\n                        setCanvasDimensions(canvas, viewport.width, viewport.height);\r\n\r\n                        renderContext = {\r\n                            canvasContext: ctx,\r\n                            viewport: viewport\r\n                        };\r\n\r\n                        renderTask = page.render(renderContext);\r\n                        renderTask.promise.then(function() {\r\n                            if (typeof scope.onPageRender === 'function') {\r\n                                scope.onPageRender();\r\n                            }\r\n                        }).catch( (reason) => console.log(reason));\r\n                    });\r\n```\r\n\r\nThanks"}}
{"actor":{"display_login":"yurydelendik"}}