flexie
flexie copied to clipboard
Published
20 hours ago •
doctyper
doctyper
Uncaught TypeError: Cannot read property 'children' of undefined
trafficstars
Uncaught TypeError: Cannot read property 'children' of undefined
This seems to happen to me when I have an element that is display: box but doesn't have any children and its parent is NOT display: box. Setting the parent to display: box prevents this error.
Using the latest uncompressed flexie.js, this occurs on line 1071
I have a wacky test case that reproduces this bug. In the CSS, there's comment that reads, simply: /* > */. If you remove that comment, Flexie will throw this Javascript error. With the comment, everything works smoothly.
Perhaps there is a ghost in the CSS parsing engine?
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nesting Flexboxes</title>
<style type="text/css">
/* Remove the comment below, and Flexie will throw a Javascript error. */
/* > */
html, body {
margin: 0; padding: 0;
height: 100%;
width: 100%;
}
body {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
}
aside {
width: 200px;
}
section {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
position: relative;
}
article {
position: absolute;
top: 50px; left: 50px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
}
article section {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
article nav {
width: 40px;
}
</style>
</head>
<body>
<header>Head</header>
<div role="main">
<!-- This section acts as a stage for panels -->
<section>
Stage
<!-- Each article is an absolutely positioned panel -->
<article>
<section>Article Section</section>
<nav>Article Nav</nav>
</article>
</section>
<aside>
Aside
</aside>
</div>
<footer>Foot</footer>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Flexie -->
<script src="https://raw.github.com/doctyper/flexie/51453fca46a8def3778afc1f70e956797432bd0e/src/flexie.js" type="text/javascript"></script>
</body>
</html>
