{"action":"opened","issue":{"url":"https://api.github.com/repos/pixijs/pixi.js/issues/3485","repository_url":"https://api.github.com/repos/pixijs/pixi.js","labels_url":"https://api.github.com/repos/pixijs/pixi.js/issues/3485/labels{/name}","comments_url":"https://api.github.com/repos/pixijs/pixi.js/issues/3485/comments","events_url":"https://api.github.com/repos/pixijs/pixi.js/issues/3485/events","html_url":"https://github.com/pixijs/pixi.js/issues/3485","id":196368788,"number":3485,"title":"cacheAsBitmap not working properly for nested elements","user":{"login":"sivael","id":1681879,"avatar_url":"https://avatars.githubusercontent.com/u/1681879?v=3","gravatar_id":"","url":"https://api.github.com/users/sivael","html_url":"https://github.com/sivael","followers_url":"https://api.github.com/users/sivael/followers","following_url":"https://api.github.com/users/sivael/following{/other_user}","gists_url":"https://api.github.com/users/sivael/gists{/gist_id}","starred_url":"https://api.github.com/users/sivael/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sivael/subscriptions","organizations_url":"https://api.github.com/users/sivael/orgs","repos_url":"https://api.github.com/users/sivael/repos","events_url":"https://api.github.com/users/sivael/events{/privacy}","received_events_url":"https://api.github.com/users/sivael/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-19T09:38:10Z","updated_at":"2016-12-19T09:38:10Z","closed_at":null,"body":"Hi.\r\n\r\nI'm working on a component using pixi and am encountering a weird issue as illustrated here:\r\n\r\nhttps://codepen.io/sivael/pen/rWPwpg?editors=0011\r\n\r\nBasically when I do a pixi equivalent of:\r\n```\r\n<scene>\r\n  <g>\r\n    <g x:10 y:10 ::cachethis>\r\n      <roundedBox />\r\n      <text>1,1</text>\r\n    </g>\r\n  </g>\r\n</scene>\r\n```\r\nAll works well, and there's no issues with cacheAsBitmap. (the green boxes in example)\r\n\r\nBUT when I do:\r\n```\r\n<scene>\r\n  <g>\r\n    <g x:10 y:10>\r\n      <g  ::cachethis>\r\n        <roundedBox />\r\n        <text>1,1</text>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</scene>\r\n```\r\n\r\nThen anything beyond the first box doesn't render properly(the red boxes example)\r\n\r\nIt looks like the function call to:\r\n` m.invert()`\r\ncaused my \r\n`m.tx = -3999.5`\r\n\r\nAnd that prevented the proper rendering of the component.\r\n\r\nNote, however, that canvas has the following code:\r\n```    m.invert();\r\n\r\n    m.tx -= bounds.x;\r\n    m.ty -= bounds.y;\r\n```\r\n\r\nwhile webGL has this:\r\n```var m = _tempMatrix;\r\n\r\n    m.tx = -bounds.x;\r\n    m.ty = -bounds.y;\r\n```\r\n\r\nNow the implementations are probably different, and changing canvas to\r\n```    m.invert();\r\n\r\n    m.tx = -bounds.x;\r\n    m.ty = -bounds.y;\r\n```\r\nactually breaks the rendering of green elements while fixing reds.\r\n\r\nAny ideas?"}}
{"actor":{"display_login":"sivael"}}