mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-13 15:49:53 +00:00
Miguel Ángel
3983d4e7bf
The prepareFlattenedInnerRoot function creates a wrapper div when inlining sub-compositions. This wrapper had no width/height, which broke CSS height:100% chains — any sub-composition using percentage heights with flexbox centering would collapse to 0px and render content at the top instead of centered. Read data-width/data-height from the inner root and set matching pixel dimensions on the wrapper's inline style. Applied in both the compiler (server-side bundling) and the runtime (browser-side composition loader). Adds a producer regression test with a centered card sub-composition that fails without this fix.
63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<template>
|
|
<div data-composition-id="centered-card" data-width="1920" data-height="1080">
|
|
<style>
|
|
[data-composition-id="centered-card"] {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #ffffff;
|
|
}
|
|
[data-composition-id="centered-card"] .wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
[data-composition-id="centered-card"] .center-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
[data-composition-id="centered-card"] .card {
|
|
width: 600px;
|
|
height: 200px;
|
|
background: #ea4c89;
|
|
border-radius: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
[data-composition-id="centered-card"] .card-text {
|
|
font-family: sans-serif;
|
|
font-size: 64px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
|
|
<div class="wrapper">
|
|
<div class="center-box">
|
|
<div class="card">
|
|
<span class="card-text">Centered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
window.__timelines = window.__timelines || {};
|
|
var tl = gsap.timeline({ paused: true });
|
|
var S = '[data-composition-id="centered-card"] ';
|
|
tl.fromTo(S + '.card', { scale: 0.8, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.5, ease: 'power2.out' }, 0);
|
|
window.__timelines['centered-card'] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|