{"action":"closed","issue":{"url":"https://api.github.com/repos/kamranahmedse/driver.js/issues/56","repository_url":"https://api.github.com/repos/kamranahmedse/driver.js","labels_url":"https://api.github.com/repos/kamranahmedse/driver.js/issues/56/labels{/name}","comments_url":"https://api.github.com/repos/kamranahmedse/driver.js/issues/56/comments","events_url":"https://api.github.com/repos/kamranahmedse/driver.js/issues/56/events","html_url":"https://github.com/kamranahmedse/driver.js/issues/56","id":310019579,"number":56,"title":"[z-index / 3d transform] Highlighted element with any parent that have transform-style: preserve-3d property are not showing","user":{"login":"jewels9","id":1373664,"avatar_url":"https://avatars1.githubusercontent.com/u/1373664?v=4","gravatar_id":"","url":"https://api.github.com/users/jewels9","html_url":"https://github.com/jewels9","followers_url":"https://api.github.com/users/jewels9/followers","following_url":"https://api.github.com/users/jewels9/following{/other_user}","gists_url":"https://api.github.com/users/jewels9/gists{/gist_id}","starred_url":"https://api.github.com/users/jewels9/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jewels9/subscriptions","organizations_url":"https://api.github.com/users/jewels9/orgs","repos_url":"https://api.github.com/users/jewels9/repos","events_url":"https://api.github.com/users/jewels9/events{/privacy}","received_events_url":"https://api.github.com/users/jewels9/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-03-30T09:23:13Z","updated_at":"2018-03-30T16:30:37Z","closed_at":"2018-03-30T16:30:37Z","author_association":"NONE","body":"As stated in the title, having any element that lives in a parent having transform-style: preserve-3d makes them not showed when highlighted by driver.js.\r\n\r\nReproduced test case is very straightforward :\r\n```html\r\n<div class=\"container\">\r\n    <span id=\"highlight_item\">test</span>\r\n</div>\r\n```\r\n```css\r\n.container {\r\n    transform-style: preserve-3d;\r\n}\r\n```\r\n```javascript\r\nconst driver=new Driver({});\r\ndriver.highlight('#highlight_item');\r\n```\r\n[And here's is a jsfiddle](https://jsfiddle.net/jewels9/u98ckerm/)\r\n\r\nI'm not really asking a fix for this issue as I've just removed the preserve-3d transform style of the parents when an item needs to be highlighted but I would love to understand what's going on. I guess there is something to do with the fact that z-index is not working as expected in the 3d space.\r\n\r\nAnyway, thanks for this great plugin I've been loving using it so far.\r\nCheers,\r\nJoris"}}
{"actor":{"display_login":"kamranahmedse"}}