{"action":"created","issue":{"url":"https://api.github.com/repos/driftyco/ionic/issues/5628","repository_url":"https://api.github.com/repos/driftyco/ionic","labels_url":"https://api.github.com/repos/driftyco/ionic/issues/5628/labels{/name}","comments_url":"https://api.github.com/repos/driftyco/ionic/issues/5628/comments","events_url":"https://api.github.com/repos/driftyco/ionic/issues/5628/events","html_url":"https://github.com/driftyco/ionic/issues/5628","id":136830093,"number":5628,"title":"$ionicModal missing backdrop","user":{"login":"Tobiaswk","id":3562,"avatar_url":"https://avatars.githubusercontent.com/u/3562?v=3","gravatar_id":"","url":"https://api.github.com/users/Tobiaswk","html_url":"https://github.com/Tobiaswk","followers_url":"https://api.github.com/users/Tobiaswk/followers","following_url":"https://api.github.com/users/Tobiaswk/following{/other_user}","gists_url":"https://api.github.com/users/Tobiaswk/gists{/gist_id}","starred_url":"https://api.github.com/users/Tobiaswk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tobiaswk/subscriptions","organizations_url":"https://api.github.com/users/Tobiaswk/orgs","repos_url":"https://api.github.com/users/Tobiaswk/repos","events_url":"https://api.github.com/users/Tobiaswk/events{/privacy}","received_events_url":"https://api.github.com/users/Tobiaswk/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/driftyco/ionic/labels/modals","name":"modals","color":"fbca04"},{"url":"https://api.github.com/repos/driftyco/ionic/labels/platform:android","name":"platform:android","color":"009800"},{"url":"https://api.github.com/repos/driftyco/ionic/labels/platform:ios","name":"platform:ios","color":"0052cc"},{"url":"https://api.github.com/repos/driftyco/ionic/labels/v1","name":"v1","color":"888888"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-26T22:16:51Z","updated_at":"2016-03-01T15:19:46Z","closed_at":null,"body":"#### Short description of the problem:\r\nionicModal is missing backdrop when shown in portrait mode. When phone is in landscape the backdrop is shown.\r\nAfter some investigation it seems the problem is related to the resolution and more specifically the width of the screen. \r\nhttp://codepen.io/SashaGeekette/pen/vOzryE\r\nTry changing the resolution width to 1000px in inspector mode with Chrome. The backdrop is suddenly missing. Then set the width to 1150 and the backdrop appears again. \r\n\r\n#### What behavior are you expecting?\r\nThe backdrop should be show in portrait orientation.\r\n\r\n**Steps to reproduce:**\r\n1. Phone in portrait mode\r\n2. Backdrop does not appear when modal is shown\r\n\r\n**Ionic Version**: 1.2.4 (although this appears in 1.x versions as well) \r\n\r\n**Browser & Operating System**: iOS / Android / Chrome"},"comment":{"url":"https://api.github.com/repos/driftyco/ionic/issues/comments/190767731","html_url":"https://github.com/driftyco/ionic/issues/5628#issuecomment-190767731","issue_url":"https://api.github.com/repos/driftyco/ionic/issues/5628","id":190767731,"user":{"login":"darshanrampatel","id":14162899,"avatar_url":"https://avatars.githubusercontent.com/u/14162899?v=3","gravatar_id":"","url":"https://api.github.com/users/darshanrampatel","html_url":"https://github.com/darshanrampatel","followers_url":"https://api.github.com/users/darshanrampatel/followers","following_url":"https://api.github.com/users/darshanrampatel/following{/other_user}","gists_url":"https://api.github.com/users/darshanrampatel/gists{/gist_id}","starred_url":"https://api.github.com/users/darshanrampatel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/darshanrampatel/subscriptions","organizations_url":"https://api.github.com/users/darshanrampatel/orgs","repos_url":"https://api.github.com/users/darshanrampatel/repos","events_url":"https://api.github.com/users/darshanrampatel/events{/privacy}","received_events_url":"https://api.github.com/users/darshanrampatel/received_events","type":"User","site_admin":false},"created_at":"2016-03-01T15:19:46Z","updated_at":"2016-03-01T15:19:46Z","body":"We noticed this too, and added the below CSS class (taken from the original modal CSS) to resolve:\r\n\r\n```\r\n@media screen {\r\n    .modal-backdrop-bg {\r\n    -webkit-transition: opacity 300ms ease-in-out;\r\n    transition: opacity 300ms ease-in-out;\r\n    background-color: #000;\r\n    opacity: 0; }\r\n  .active .modal-backdrop-bg {\r\n    opacity: 0.5; }\r\n}\r\n```\r\n\r\nThe reason is that the .modal-backdrop.bg only is applied when the width is 680px or larger; see lines [5296](https://github.com/driftyco/ionic/blob/master/release/css/ionic.css#L5296) and [5322](https://github.com/driftyco/ionic/blob/master/release/css/ionic.css#L5322) of [ionic.css](https://github.com/driftyco/ionic/blob/master/release/css/ionic.css)."}}