Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add top:0 to hiddenContentStyles #33289

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

smikula
Copy link
Contributor

@smikula smikula commented Nov 18, 2024

Previous Behavior

hiddenContentStyles sets position: absolute but does not specify top or any other positioning property. In this case, the element gets positioned wherever it would fall in the static flow. This can, in some cases cause the scroll height of the container to get inflated. E.g. consider the following pseudocode:

<container style="position:relative; height: 100px">
    <content-wrapper style="max-height:100px">
        <content style="height:200px" />
        <hidden-div class="hiddenContentStyles" />
    </content-wrapper>
</container>

You would expect container not to scroll, because its height (100px) matches its content (max-height: 100px). But hidden-div gets defaulted to a position of top: 200px, meaning container has 200px of scrollable range (and the bottom 100px of it are empty space!)

New Behavior

By specifying top: 0 the hidden div is guaranteed to be positioned at the top of the container and won't affect the scroll height.

Copy link

github-actions bot commented Nov 18, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
Announced
38.489 kB
13.296 kB
38.495 kB
13.301 kB
6 B
5 B
react
Breadcrumb
202.308 kB
60.391 kB
202.331 kB
60.408 kB
23 B
17 B
react
Button
195.781 kB
56.634 kB
195.804 kB
56.649 kB
23 B
15 B
react
ButtonGrid
180.729 kB
54.641 kB
180.735 kB
54.646 kB
6 B
5 B
react
ColorPicker
135.292 kB
42.21 kB
135.298 kB
42.214 kB
6 B
4 B
react
ComboBox
252.193 kB
72.294 kB
252.216 kB
72.303 kB
23 B
9 B
react
CommandBar
203.349 kB
60.142 kB
203.372 kB
60.16 kB
23 B
18 B
react
ContextualMenu
155.25 kB
48.215 kB
155.256 kB
48.218 kB
6 B
3 B
react
DetailsList
229.913 kB
65.787 kB
229.919 kB
65.79 kB
6 B
3 B
react
Dialog
211.707 kB
63.166 kB
211.73 kB
63.181 kB
23 B
15 B
react
DocumentCard
217.326 kB
64.436 kB
217.349 kB
64.457 kB
23 B
21 B
react
Dropdown
234.241 kB
68.617 kB
234.264 kB
68.633 kB
23 B
16 B
react
ExtendedPicker
96.873 kB
27.893 kB
96.873 kB
27.892 kB

-1 B
react
Facepile
210.9 kB
63.183 kB
210.906 kB
63.186 kB
6 B
3 B
react
FloatingPicker
242.356 kB
69.005 kB
242.379 kB
69.014 kB
23 B
9 B
react
Grid
180.729 kB
54.641 kB
180.735 kB
54.646 kB
6 B
5 B
react
GroupedList
135.074 kB
40.705 kB
135.08 kB
40.71 kB
6 B
5 B
react
GroupedListV2
122.691 kB
37.794 kB
122.697 kB
37.798 kB
6 B
4 B
react
MessageBar
190.859 kB
57.107 kB
190.882 kB
57.124 kB
23 B
17 B
react
Nav
188.313 kB
56.502 kB
188.319 kB
56.507 kB
6 B
5 B
react
Panel
201.354 kB
59.981 kB
201.377 kB
60 kB
23 B
19 B
react
Persona
114.948 kB
36.532 kB
114.954 kB
36.537 kB
6 B
5 B
react
PersonaCoin
114.948 kB
36.532 kB
114.954 kB
36.537 kB
6 B
5 B
react
Pickers
294.356 kB
82.366 kB
294.379 kB
82.378 kB
23 B
12 B
react
Pivot
189.227 kB
57.281 kB
189.233 kB
57.285 kB
6 B
4 B
react
Rating
82.12 kB
26.127 kB
82.126 kB
26.131 kB
6 B
4 B
react
Fluent UI React (entire library)
1.014 MB
281.728 kB
1.014 MB
281.748 kB
23 B
20 B
react
SearchBox
189.108 kB
56.682 kB
189.131 kB
56.699 kB
23 B
17 B
react
SelectedItemsList
232.868 kB
67.895 kB
232.891 kB
67.912 kB
23 B
17 B
react
Shimmer
49.259 kB
16.268 kB
49.265 kB
16.273 kB
6 B
5 B
react
ShimmeredDetailsList
240.695 kB
68.536 kB
240.701 kB
68.538 kB
6 B
2 B
react
SpinButton
192.811 kB
57.779 kB
192.834 kB
57.795 kB
23 B
16 B
react
Spinner
41.775 kB
14.48 kB
41.781 kB
14.484 kB
6 B
4 B
react
Sticky
32.599 kB
10.504 kB
32.605 kB
10.508 kB
6 B
4 B
react
Styling
46.033 kB
15.135 kB
46.039 kB
15.138 kB
6 B
3 B
react
SwatchColorPicker
191.143 kB
58.164 kB
191.149 kB
58.168 kB
6 B
4 B
react
TeachingBubble
206.106 kB
61.06 kB
206.129 kB
61.073 kB
23 B
13 B
react
TimePicker
242.004 kB
70.053 kB
242.027 kB
70.062 kB
23 B
9 B
react
Tooltip
87.437 kB
28.26 kB
87.443 kB
28.26 kB
6 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
ActivityItem
71.236 kB
23.357 kB
react
Autofill
15.42 kB
4.766 kB
react
Calendar
121.882 kB
37.032 kB
react
Callout
84.33 kB
27.648 kB
react
Check
53.204 kB
17.848 kB
react
Checkbox
59.985 kB
19.903 kB
react
ChoiceGroup
65.494 kB
21.489 kB
react
ChoiceGroupOption
58.767 kB
19.362 kB
react
Coachmark
93.151 kB
29.428 kB
react
Color
7.789 kB
3.127 kB
react
DatePicker
184.302 kB
56.159 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
Divider
19.603 kB
6.845 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.303 kB
11.511 kB
react
Fabric
41.745 kB
14.366 kB
react
FocusTrapZone
17.03 kB
5.924 kB
react
FocusZone
55.159 kB
17.492 kB
react
HoverCard
97.167 kB
30.794 kB
react
Icon
51.885 kB
17.272 kB
react
Icons
66.361 kB
24.397 kB
react
Image
46.904 kB
15.707 kB
react
Keytip
81.693 kB
26.766 kB
react
KeytipData
14.039 kB
4.588 kB
react
KeytipLayer
103.474 kB
32.015 kB
react
Keytips
106.246 kB
33.023 kB
react
Label
38.347 kB
13.257 kB
react
Layer
48.099 kB
16.367 kB
react
Link
39.682 kB
13.67 kB
react
List
39.371 kB
12.463 kB
react
MarqueeSelection
74.517 kB
22.433 kB
react
Modal
93.745 kB
30.279 kB
react
OverflowSet
33.393 kB
11.329 kB
react
Overlay
40.902 kB
14.095 kB
react
PersonaPresence
58.074 kB
19.384 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.807 kB
7.701 kB
react
PositioningContainer
73.85 kB
23.765 kB
react
ProgressIndicator
39.494 kB
13.55 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.557 kB
17.728 kB
react
SelectableOption
724 B
413 B
react
Selection
42.444 kB
12.278 kB
react
Separator
35.384 kB
12.146 kB
react
Slider
57.651 kB
19.217 kB
react
Stack
41.734 kB
14.268 kB
react
Text
36.908 kB
12.822 kB
react
TextField
80.79 kB
25.315 kB
react
Theme
43.501 kB
14.183 kB
react
ThemeGenerator
12.392 kB
4.126 kB
react
Toggle
46.225 kB
15.986 kB
react
Utilities
82.931 kB
25.148 kB
react
Viewport
23.888 kB
7.656 kB
react
WeeklyDayPicker
102.025 kB
31.846 kB
react
WindowProvider
1.059 kB
541 B
🤖 This report was generated against 5273591bf76555d0c81cdbdeb3b1a29079cab24f

Copy link

Pull request demo site: URL

@smikula smikula marked this pull request as ready for review November 18, 2024 22:47
@JustSlone
Copy link
Collaborator

What is the risk of regression making this fairly fundamental change? If folks have overridden this behavior, will they run into issues at runtime. CSS changes are some of the worst as they result in customer incidents not build failures.

If this was a regression or an issue introduced recently perhaps the risk is lower.

@smikula
Copy link
Contributor Author

smikula commented Nov 18, 2024

What is the risk of regression making this fairly fundamental change? If folks have overridden this behavior, will they run into issues at runtime. CSS changes are some of the worst as they result in customer incidents not build failures.

If this was a regression or an issue introduced recently perhaps the risk is lower.

@JustSlone — valid questions, and I don't have a great answer. I feel pretty good about the change given that the intent of the style is that the element should be hidden, and if the element is effectively invisible, it shouldn't matter where it gets positioned. But I can't account for assumptions or overrides that a consumer might make.

What's the philosophy here? I could hack around it in my own product to solve my own problem, but my preference is to fix the root cause and (hopefully) benefit everybody. Do we avoid making the right long-term fix because of the short term pain it will cause?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants