Я пытаюсь использовать MDL во всплывающем окне с расширением Chrome, и у меня возникают некоторые проблемы с пользовательским интерфейсом.Во-первых, если я не даю ему границу не менее 1 пикселя, я получаю это: 
Во-вторых, если я ставлю границу вокруг тела, я получаю это: 
Три вещи: граница вызывает полосу прокрутки, я получаю анимацию скольжения формы, которая очень медленная, когда отображается, и, наконец, все всплывающее окно теперь намного выше, чемформа, но это может быть меню, которое появляется в результате нажатия на значок блина.
Вот код для popup.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- build:css styles/popup-vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- build:css styles/main.css -->
<link href="styles/main.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body style="width: 500px;">
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" style="padding: -1px;">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Chrome Extension Test v<span id="banner-version"></span></span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<form>
Operation<br>
<select name="package" style="width:100%">
<option value="OP1">Op1</option>
<option value="OP2">Op2</option>
<option value="OP3">Op3e</option>
</select>
First Name<br><input type="text" style="width: 100%" placeholder="First Name">
Last Name<br><input type="text" style="width: 100%" placeholder="Last Name">
Email<br><input type="text" style="width: 100%" placeholder="Email">
<button>Submit For Operation</button>
</form>
</div>
</main>
</div>
<!-- build:js scripts/popup-vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/popup.js -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/popup.js"></script>
<!-- endbuild -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
Манифест.json:
{
"name": "__MSG_appName__",
"version": "0.0.1",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"content_security_policy": "script-src 'self' https://code.getmdl.io; object-src 'self'",
"icons": {
"16": "images/HeadCheck16x16.png",
"19": "images/HeadCheck19x19.png",
"38": "images/HeadCheck38x38.png",
"128": "images/HeadCheck128x128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"scripts/background.js"
]
},
"permissions": [],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"browser_action": {
"default_icon": {
"19": "images/HeadCheck19x19.png",
"38": "images/HeadCheck38x38.png"
},
"default_title": "Test Chrome Extension",
"default_popup": "popup.html"
}
}
Содержимое popup.js:
'use strict';
console.log('\'Allo \'Allo! Popup');
var manifestData = chrome.runtime.getManifest();
console.log(manifestData.version);
console.log(manifestData.default_locale);
jQuery('#banner-version').html(manifestData.version);
В лучшем случае я знаю MDL, но этот вопрос может подчеркнуть это.
Как использовать MDL ввсплывающее окно расширения Chrome без использования границы?и как отключить скользящую анимацию при использовании MDL