fix(regions): Use relative position and size to support dynamic reps#500
fix(regions): Use relative position and size to support dynamic reps#500jstoffan merged 2 commits intobox:masterfrom
Conversation
| position: absolute; | ||
|
|
||
| // stylelint-disable-next-line declaration-no-important | ||
| box-sizing: content-box !important; // Padding needs to increase the hit area of the button to include the borders |
There was a problem hiding this comment.
The other alternative that I considered was to use something like this in styleShape, but it seemed somehow worse than just changing the box sizing model:
width: `calc(${width}% + ${BORDER_TOTAL}px)`
ConradJChan
left a comment
ConradJChan
left a comment
There was a problem hiding this comment.
LGTM. Does this handle rescaling on zoom in/out, and browser resize?
|
@ConradJChan, it handles scaling inherently because the positions and sizes are tracked as percentages. So you wind up with percentages (10% top, left, etc.) of a percentage (scale of 125%). |
|
|
||
| .ba-RegionCreator-rect { | ||
| will-change: height, transform, width; | ||
| transform: translateZ(0); |
There was a problem hiding this comment.
Why do we need this translate?
There was a problem hiding this comment.
It seems to help performance in Firefox and Safari a bit and has no apparent effect in Chrome. It's the same concept as using translate3d instead of translate. I can always remove it later if it becomes a problem.
3 participants
Todo