{"action":"created","issue":{"url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup/issues/177","repository_url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup","labels_url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup/issues/177/labels{/name}","comments_url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup/issues/177/comments","events_url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup/issues/177/events","html_url":"https://github.com/SaviorXTanren/mixer-mixitup/issues/177","id":333089698,"node_id":"MDU6SXNzdWUzMzMwODk2OTg=","number":177,"title":"Overlays with Different Offsets Creating Glitch","user":{"login":"UnderSwitch","id":26529464,"node_id":"MDQ6VXNlcjI2NTI5NDY0","avatar_url":"https://avatars3.githubusercontent.com/u/26529464?v=4","gravatar_id":"","url":"https://api.github.com/users/UnderSwitch","html_url":"https://github.com/UnderSwitch","followers_url":"https://api.github.com/users/UnderSwitch/followers","following_url":"https://api.github.com/users/UnderSwitch/following{/other_user}","gists_url":"https://api.github.com/users/UnderSwitch/gists{/gist_id}","starred_url":"https://api.github.com/users/UnderSwitch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/UnderSwitch/subscriptions","organizations_url":"https://api.github.com/users/UnderSwitch/orgs","repos_url":"https://api.github.com/users/UnderSwitch/repos","events_url":"https://api.github.com/users/UnderSwitch/events{/privacy}","received_events_url":"https://api.github.com/users/UnderSwitch/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-06-17T20:17:43Z","updated_at":"2018-06-19T02:12:00Z","closed_at":null,"author_association":"NONE","body":"Ok, so this isn't a huge issue, as most users won't be using multiple overlays on the screen at the same time. But, I wanted to file a bug none the less.\r\n\r\nSo, here's the problem from my eyes (using HTML code in Mix it Up overlays):\r\n**1) I have figured out that Mix it Up uses CSS transform: translateX/Y properties to move elements among the screen (not 100% sure but I think so).\r\n2) Because only 1 HTML file is rendered on screen, you must rely on HTML code already inside the <body> tag for the page to render on the overlay\r\n3) The problem with this is the translate X/Y properties in CSS affect the whole <body> tag. Creating problems when multiple elements are rendered at different offsets.** \r\n\r\n_Unrelated problem: For some reason, the Mix it Up Overlay system renders at 2x the resolution of the base canvas (not sure if this is a feature or bug)._\r\n\r\nPossible/Questionable ways to go about fixing the problem for Mix it Up (outside of just using browser sources in OBS)\r\n**Possible Way 1) Maybe creating a parent <div> element for each overlay by itself & using the position: absolute style to move in among the screen\r\nPossible Way 2) Although this is a way more complex change, it may be a more effective solution for future updates for the overlay system. Use different HTML renders on screen, so each overlay will be rendered on it's own canvas. Each HTML file rendered will add +1 to the Z-Index to prevent Z-Fighting. When the Z-Index is maxed, it will wait until all overlays are dismissed and reset to 1. This way sounds like it may suck up a lot of time for a fix but just throwing it out there\r\nPossible Way 3) Allowing Mix it Up to connect to already used browser sources (outside of the Mix it Up browser source) and inject the mix it up overlay into the source (on choice of the user). For example: I want to have Follow/Hosting/Donation popups to be on one browser source (called popups), as all 3 have the same offsets so they will not offset each other. However, I have these medals that I want to popup in the center of the screen that have different offsets than the popups, so I choose to put these on another browser source in OBS called medals. So, although the core problem isn't fixed, it's still a nice work around and actually a nice feature to have none the less**\r\n\r\nAs always, thank you all for the hard work on Mix it Up. Keep up the great work!"},"comment":{"url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup/issues/comments/398252085","html_url":"https://github.com/SaviorXTanren/mixer-mixitup/issues/177#issuecomment-398252085","issue_url":"https://api.github.com/repos/SaviorXTanren/mixer-mixitup/issues/177","id":398252085,"node_id":"MDEyOklzc3VlQ29tbWVudDM5ODI1MjA4NQ==","user":{"login":"SaviorXTanren","id":752903,"node_id":"MDQ6VXNlcjc1MjkwMw==","avatar_url":"https://avatars3.githubusercontent.com/u/752903?v=4","gravatar_id":"","url":"https://api.github.com/users/SaviorXTanren","html_url":"https://github.com/SaviorXTanren","followers_url":"https://api.github.com/users/SaviorXTanren/followers","following_url":"https://api.github.com/users/SaviorXTanren/following{/other_user}","gists_url":"https://api.github.com/users/SaviorXTanren/gists{/gist_id}","starred_url":"https://api.github.com/users/SaviorXTanren/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SaviorXTanren/subscriptions","organizations_url":"https://api.github.com/users/SaviorXTanren/orgs","repos_url":"https://api.github.com/users/SaviorXTanren/repos","events_url":"https://api.github.com/users/SaviorXTanren/events{/privacy}","received_events_url":"https://api.github.com/users/SaviorXTanren/received_events","type":"User","site_admin":false},"created_at":"2018-06-19T02:12:00Z","updated_at":"2018-06-19T02:12:00Z","author_association":"OWNER","body":"So, just so we're on the same page, when you refer to \"HTML\", are you talking about the HTML option or the Web Page option for the Overlay Action? If you're doing anything more than VERY BASIC HTML, you should be making a separate HTML file with all your HTML, JS, & CSS and using the Web Page option.\r\n\r\nAs for the options you presented:\r\n\r\n1) Each item that is added to the overlay is contained with its own div, so no 1 element should affect another (except if you are doing some very wonky CSS overwrites in your HTML code) and we're not doing any translateXY operations, we're simply setting the positions on each div as its added. If you're referring specifically to the animations, those are handled by a separate style sheet that we use from an open source project.\r\n\r\n2) Adding a incrementally maintained z-index would be relatively easy to do and I can include that in an upcoming update.\r\n\r\n3) I'm not sure what you mean when you say \"inject into another browser source\". We can't arbitrarily send WebSocket packets to another hosted website, as it just doesn't work that way. We're also not going to allow for more than one Overlay at a time, as the complexity to the app from a code & CPU usage perspective wouldn't be worth it."}}
{"actor":{"display_login":"SaviorXTanren"}}