Describe the bug:
If you have an absolutely positioned element containing center-aligned text that overflows its parent container, moving the element causes overflowed text to persist on the screen.
I’ve created a repro under the game “Widget Text Persistence Bug”, which is also remixable.
How do you cause this bug?
Create a widget with a single element, similar to the following:
<html>
<head>
<script type="text/javascript" src="coui://uiresources/js/crayta.js"></script>
<style type="text/css">
.bug {
position: absolute;
width: 2rem;
height: 2rem;
text-align: center;
}
</style>
</head>
<body>
<div class="bug" data-bind-style-left="{{data.left}}" data-bind-style-top="{{data.top}}">
Example
</div>
<script>
engine.createJSModel('data', {
left: 100,
top: 100
});
engine.on("UpdatePosition", (x, y) => {
data.left = x * window.innerWidth;
data.top = y * window.innerHeight;
engine.updateWholeModel(data);
engine.synchronizeModels();
});
</script>
</body>
</html>
With the associated script:
local BugScript = {}
function BugScript:LocalInit()
self.widget = self:GetEntity().bugWidget
end
function BugScript:LocalOnTick()
local pos = GetWorld():GetLocalUser():ProjectPositionToScreen(Vector.New(1000, 0, 250))
self.widget:CallFunction("UpdatePosition", pos.x, pos.y)
end
return BugScript
The import parts of this are:
- The text does not fit inside a 2x2rem container. The
leofExampleis overflowing the container. - The text is center aligned
- The element is absolutely positioned
- The element’s left style attribute it updated
Screenshots / video of bug:
Which platform: PC / Stadia
Which input: Controller / keyboard + mouse
Your Crayta username: Cereal
How regularly do you see this? (E.g. 2/3 times - please try 3 times if possible): Every time
Time + date seen: January 23 2022
Version number (found in Help tab in Settings): 0.e3.63.114111
