Skip to content

Instantly share code, notes, and snippets.

@fholzer

fholzer/chrome-svg-foreignobject-overflow-bug.html

Created February 18, 2019 01:22
Show Gist options
  • Save fholzer/9da374d965bafc2973590b8f9e82890e to your computer and use it in GitHub Desktop.
Save fholzer/9da374d965bafc2973590b8f9e82890e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chrome-svg-foreignobject-overflow-bug.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg foreignObject test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
svg.outer {
border: 1px solid black;
}
svg.outer > foreignObject {
border: 1px solid green;
}
div.wrapper {
overflow: scroll;
}
</style>
</head>
<body>
<svg height="300px" width="300px" class="outer">
<foreignObject height="100%" width="100%" x="0" y="0">
<div class="wrapper">
<p>toooooooooooooooooooooooooooo_looooooooooooooong_toooooooooooooooooooooo_display this will trigger the bug</p>
</div>
</foreignObject>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment