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.

Sign up for GitHub

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

Jump to bottom

Fix Safari default outline on focused element #14917

Merged
merged 4 commits into from
Sep 8, 2020
Merged

Fix Safari default outline on focused element #14917

merged 4 commits into from
Sep 8, 2020

Conversation

YuanboXue-Amber
Copy link
Contributor

Pull request checklist

Description of changes

Safari displays its default outline even with outline: 0. Only outline: 'none' can remove Safari's default.
Similar to pull #12279

Focus areas to test

Visual test

@size-auditor
Copy link

size-auditor bot commented Sep 7, 2020 •
edited

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 52b451c9d62285e342a2ca0b65e91b874d30b72a (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 7, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 912 928 5000
ButtonNext mount 677 671 5000
Checkbox mount 1669 1597 5000
CheckboxBase mount 1380 1385 5000
CheckboxNext mount 1663 1693 5000
ChoiceGroup mount 5067 5103 5000
ChoiceGroupNext mount 5134 5109 5000
ComboBox mount 952 950 1000
CommandBar mount 8051 8058 1000
ContextualMenu mount 17173 16678 1000
DefaultButton mount 1135 1144 5000
DetailsRow mount 3622 3588 5000
DetailsRowFast mount 3598 3575 5000
DetailsRowNoStyles mount 3463 3437 5000
Dialog mount 1504 1520 1000
DocumentCardTitle mount 1889 1950 1000
Dropdown mount 2662 2638 5000
FocusZone mount 1903 1891 5000
IconButton mount 1791 1785 5000
Label mount 351 351 5000
Link mount 482 472 5000
LinkNext mount 465 473 5000
MenuButton mount 1496 1506 5000
MessageBar mount 2133 2161 5000
MessageBarNext mount 2169 2147 5000
Nav mount 3262 3319 1000
OverflowSet mount 1443 1500 5000
OverflowSetNext mount 1078 1053 5000
Panel mount 1507 1485 1000
Persona mount 864 865 1000
Pivot mount 1466 1456 1000
PivotNext mount 1398 1435 1000
PrimaryButton mount 1312 1341 5000
SearchBox mount 1341 1351 5000
SearchBoxNext mount 1396 1349 5000
Shimmer mount 2660 2625 5000
ShimmerNext mount 2728 2599 5000
Slider mount 1517 1507 5000
SliderNext mount 1995 1949 5000
SpinButton mount 5013 5143 5000
SpinButtonNext mount 5457 5231 5000
Spinner mount 445 427 5000
SplitButton mount 3235 3208 5000
Stack mount 535 537 5000
StackWithIntrinsicChildren mount 2001 1978 5000
StackWithTextChildren mount 5169 5183 5000
SwatchColorPicker mount 10606 10658 5000
SwatchColorPickerNext mount 10484 10549 5000
TagPicker mount 2860 2833 5000
TeachingBubble mount 53814 53811 5000
TeachingBubbleNext mount 54415 53279 5000
Text mount 443 458 5000
TextField mount 1444 1427 5000
ThemeProvider mount 4635 4652 5000
ThemeProvider virtual-rerender 460 476 5000
Toggle mount 859 875 5000
ToggleNext mount 818 803 5000
button mount 115 126 5000

Perf Analysis (Fluent)

⚠️ 5 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1770 49 36.12:1 analysis
ButtonUseCssNestingPerf.default 1108 50 22.16:1 analysis
ButtonUseCssPerf.default 849 44 19.3:1 analysis
ChatWithPopoverPerf.default 505 482 1.05:1 analysis
ListNestedPerf.default 628 856 0.73:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.5 0.9:1 2000 908
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 594
🔧 Checkbox.Fluent 0.65 0.38 1.71:1 1000 650
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 873
🔧 Dropdown.Fluent 3.03 0.49 6.18:1 1000 3026
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 721
🎯 Image.Fluent 0.09 0.11 0.82:1 5000 426
🔧 Slider.Fluent 1.64 0.39 4.21:1 1000 1644
🔧 Text.Fluent 0.08 0.04 2:1 5000 392
🦄 Tooltip.Fluent 0.12 21.14 0.01:1 5000 589

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 166 120 1.38:1
SegmentMinimalPerf.default 405 310 1.31:1
ListMinimalPerf.default 569 446 1.28:1
AttachmentMinimalPerf.default 189 154 1.23:1
FlexMinimalPerf.default 333 270 1.23:1
BoxMinimalPerf.default 404 335 1.21:1
RadioGroupMinimalPerf.default 460 380 1.21:1
FormMinimalPerf.default 447 371 1.2:1
RefMinimalPerf.default 248 207 1.2:1
GridMinimalPerf.default 375 314 1.19:1
LayoutMinimalPerf.default 453 384 1.18:1
Image.Fluent 426 360 1.18:1
Text.Fluent 392 332 1.18:1
ImageMinimalPerf.default 409 349 1.17:1
SkeletonMinimalPerf.default 447 382 1.17:1
AccordionMinimalPerf.default 176 152 1.16:1
DividerMinimalPerf.default 385 331 1.16:1
StatusMinimalPerf.default 750 647 1.16:1
TextMinimalPerf.default 390 340 1.15:1
AnimationMinimalPerf.default 434 382 1.14:1
Dialog.Fluent 873 763 1.14:1
HeaderMinimalPerf.default 403 358 1.13:1
ReactionMinimalPerf.default 427 377 1.13:1
TableMinimalPerf.default 444 394 1.13:1
VideoMinimalPerf.default 684 604 1.13:1
ButtonMinimalPerf.default 192 172 1.12:1
Tooltip.Fluent 589 528 1.12:1
ChatMinimalPerf.default 660 592 1.11:1
HeaderSlotsPerf.default 851 770 1.11:1
LabelMinimalPerf.default 448 405 1.11:1
TextAreaMinimalPerf.default 501 454 1.1:1
AvatarMinimalPerf.default 500 459 1.09:1
DialogMinimalPerf.default 827 762 1.09:1
TooltipMinimalPerf.default 865 793 1.09:1
CardMinimalPerf.default 584 541 1.08:1
ChatDuplicateMessagesPerf.default 457 424 1.08:1
MenuButtonMinimalPerf.default 1675 1553 1.08:1
ItemLayoutMinimalPerf.default 1338 1250 1.07:1
PopupMinimalPerf.default 718 672 1.07:1
DropdownManyItemsPerf.default 777 735 1.06:1
LoaderMinimalPerf.default 769 726 1.06:1
ProviderMinimalPerf.default 1017 960 1.06:1
IconMinimalPerf.default 693 653 1.06:1
Button.Fluent 594 561 1.06:1
AlertMinimalPerf.default 312 298 1.05:1
ToolbarMinimalPerf.default 977 933 1.05:1
TreeMinimalPerf.default 898 857 1.05:1
Avatar.Fluent 908 864 1.05:1
Icon.Fluent 721 688 1.05:1
EmbedMinimalPerf.default 1997 1929 1.04:1
MenuMinimalPerf.default 894 867 1.03:1
SplitButtonMinimalPerf.default 3810 3704 1.03:1
CustomToolbarPrototype.default 3981 3857 1.03:1
CheckboxMinimalPerf.default 2946 2895 1.02:1
Checkbox.Fluent 650 638 1.02:1
Dropdown.Fluent 3026 2968 1.02:1
Slider.Fluent 1644 1619 1.02:1
AttachmentSlotsPerf.default 1171 1164 1.01:1
DropdownMinimalPerf.default 3036 2994 1.01:1
InputMinimalPerf.default 1355 1336 1.01:1
TreeWith60ListItems.default 236 234 1.01:1
CarouselMinimalPerf.default 453 453 1:1
ProviderMergeThemesPerf.default 2003 2002 1:1
SliderMinimalPerf.default 1609 1613 1:1
TableManyItemsPerf.default 2191 2185 1:1
ButtonSlotsPerf.default 599 615 0.97:1
ListWith60ListItems.default 947 1072 0.88:1
ListCommonPerf.default 703 963 0.73:1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 7, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit eb84c9b:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 7, 2020 •
edited

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6c87fbc:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@YuanboXue-Amber
Copy link
Contributor Author

Here's a codesandbox with dropdown component

@YuanboXue-Amber YuanboXue-Amber merged commit 6f56436 into microsoft:master Sep 8, 2020
@YuanboXue-Amber YuanboXue-Amber deleted the fix-safari-dropdown-focus branch September 8, 2020 09:19
hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
@YuanboXue-Amber @hutchcodes
Fix Safari default outline on focused element (microsoft#14917)
b979901 
* Fix Safari default outline on focused element

* Update changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@miroslavstastny miroslavstastny miroslavstastny approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@layershifter layershifter Awaiting requested review from layershifter

@levithomason levithomason Awaiting requested review from levithomason

@mnajdova mnajdova Awaiting requested review from mnajdova

@pompomon pompomon Awaiting requested review from pompomon

Assignees
No one assigned
Labels
Component: Dropdown Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Safari] Dropdown style issue after select item.
3 participants
@YuanboXue-Amber @msft-github-bot @miroslavstastny