fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

YuanboXue-Amber · 2022-08-19T15:38:54Z

Description

Remove transform: rotate(360deg) from popup content.
This style is reported to cause text blurry in TMP. I couldn't repro nor figure out the reason for blurry text 🤷‍♀️. But looking at this style, I don't see why it should be there in the first place. So in the end I decide to remove it.

⚠️ This change can cause tiny shifts in UI

See the below example, add/remove the transform: rotate(360deg) style shifts the yellow dots for a little bit:
(I think this happens due to how browser calculates rotate. There maybe floating number involved)

Source for the above example:

<!DOCTYPE html>
<html>
  <head>
    <title>example</title>
    <meta charset="UTF-8" />
    <style>
      #root {
        position: relative;
        border: 5px solid orange;
        height: 400px;
        width: 400px;
        background: darkcyan;
        margin-top: 201.3px;
      }
      .test-container {
        position: absolute;
        box-sizing: border-box;
        top: 31.07px;
        left: 29.53px;
        height: 313.5px;
        width: 200px;
        border: 10px solid red;
        display: flex;
        align-items: center;
      }
      .rotate {
        border: 10px dotted green;
        /* comment out this line to see yellow dots shift its position */
        transform: rotate(360deg);
      }
      .test-child {
        height: 100px;
        width: 100px;
        border: 20px solid blue;
      }
      .child-in-rotate {
        height: 100px;
        width: 100px;
        border: 20px dotted yellow;
      }
    </style>
  </head>

  <body>
    <div id="root">
      <div class="test-container">
        <div class="test-child"></div>
      </div>
      <div class="test-container rotate">
        <div class="test-child child-in-rotate"></div>
      </div>
    </div>
  </body>
</html>

codesandbox-ci · 2022-08-19T15:47:53Z

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 fe08e03:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-08-19T15:51:53Z

Asset size changes

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

Baseline commit: aa1b9dd77b36fe633d64430db0292af546bbe35c (build)

fabricteam · 2022-08-19T15:59:09Z

📊 Bundle size report

_{🤖 This report was generated against aa1b9dd77b36fe633d64430db0292af546bbe35c}

fabricteam · 2022-08-19T16:03:15Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AvatarMinimalPerf.default	245	219	1.12:1
TreeWith60ListItems.default	202	182	1.11:1
ChatDuplicateMessagesPerf.default	325	298	1.09:1
AccordionMinimalPerf.default	172	160	1.08:1
BoxMinimalPerf.default	389	363	1.07:1
FlexMinimalPerf.default	339	324	1.05:1
AlertMinimalPerf.default	301	290	1.04:1
ButtonOverridesMissPerf.default	1494	1438	1.04:1
ChatWithPopoverPerf.default	432	414	1.04:1
GridMinimalPerf.default	394	380	1.04:1
HeaderMinimalPerf.default	414	398	1.04:1
ImageMinimalPerf.default	465	449	1.04:1
LabelMinimalPerf.default	434	418	1.04:1
ListNestedPerf.default	643	616	1.04:1
ToolbarMinimalPerf.default	1062	1023	1.04:1
ButtonSlotsPerf.default	618	601	1.03:1
DialogMinimalPerf.default	879	855	1.03:1
DropdownManyItemsPerf.default	794	774	1.03:1
HeaderSlotsPerf.default	885	858	1.03:1
LayoutMinimalPerf.default	418	407	1.03:1
SkeletonMinimalPerf.default	383	371	1.03:1
TextMinimalPerf.default	376	365	1.03:1
TreeMinimalPerf.default	894	868	1.03:1
CarouselMinimalPerf.default	521	509	1.02:1
ChatMinimalPerf.default	814	797	1.02:1
ItemLayoutMinimalPerf.default	1332	1307	1.02:1
ListWith60ListItems.default	691	679	1.02:1
MenuMinimalPerf.default	968	952	1.02:1
PopupMinimalPerf.default	695	682	1.02:1
PortalMinimalPerf.default	170	167	1.02:1
ProviderMergeThemesPerf.default	1335	1314	1.02:1
ProviderMinimalPerf.default	428	420	1.02:1
ReactionMinimalPerf.default	420	411	1.02:1
SegmentMinimalPerf.default	394	385	1.02:1
TableMinimalPerf.default	452	442	1.02:1
ButtonMinimalPerf.default	192	191	1.01:1
CardMinimalPerf.default	648	644	1.01:1
EmbedMinimalPerf.default	4110	4064	1.01:1
InputMinimalPerf.default	1251	1234	1.01:1
RadioGroupMinimalPerf.default	515	510	1.01:1
TableManyItemsPerf.default	2212	2189	1.01:1
TextAreaMinimalPerf.default	555	549	1.01:1
TooltipMinimalPerf.default	2580	2552	1.01:1
AttachmentSlotsPerf.default	1228	1230	1:1
CheckboxMinimalPerf.default	2342	2334	1:1
DatepickerMinimalPerf.default	6333	6316	1:1
DropdownMinimalPerf.default	2931	2920	1:1
ListCommonPerf.default	724	721	1:1
LoaderMinimalPerf.default	744	742	1:1
MenuButtonMinimalPerf.default	1916	1917	1:1
RefMinimalPerf.default	225	224	1:1
SplitButtonMinimalPerf.default	4895	4892	1:1
CustomToolbarPrototype.default	2817	2823	1:1
DividerMinimalPerf.default	384	389	0.99:1
IconMinimalPerf.default	775	785	0.99:1
AnimationMinimalPerf.default	572	583	0.98:1
ListMinimalPerf.default	568	582	0.98:1
RosterPerf.default	2397	2434	0.98:1
SliderMinimalPerf.default	1738	1766	0.98:1
AttachmentMinimalPerf.default	167	172	0.97:1
StatusMinimalPerf.default	746	766	0.97:1
VideoMinimalPerf.default	847	877	0.97:1
FormMinimalPerf.default	425	463	0.92:1

* master: (63 commits) feat: add helper types to assist DOM element handling (microsoft#24722) applying package updates Textarea/hc bug (microsoft#24701) Fix null ref in use slider (microsoft#24728) Add Field unit tests, and remove snapshot tests (microsoft#24706) Stress Test: add build commands (microsoft#24575) Coachmark - useOffsetHeight should cause re-render on each set state to match v7 functionality (microsoft#24702) Implement screener tests for Field components (microsoft#24684) Update Field types to clean up react-field.api.md (microsoft#24703) fix(Popup): remove rotate(360deg) from PopupContent content styles (microsoft#24432) fix(FocusZone): should reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` (microsoft#24463) Fix greyed out legend key contrast ratio (microsoft#24714) fix: Portal compat should apply `focus-visible` ponyfill (microsoft#24712) Fix artifact error (microsoft#24717) chore(react-dialog): remove localShorthands in favor of griffel shorthands (microsoft#24715) Skip screener checks for draft PRs with exception of appropriately la… (microsoft#24694) fix: Remove provider classname from focus styles (microsoft#24710) feat: autocontrolled `useTable` hook (microsoft#24688) feat: add dialog properties to getNativeElementProps (microsoft#24698) Using migrate rather than upgrade term (microsoft#24695) ...

test removal

deb0d27

msft-fluent-ui-bot added the Fluent UI react-northstar label Aug 19, 2022

msft-fluent-ui-bot assigned layershifter Aug 19, 2022

YuanboXue-Amber changed the title ~~[DRAFT] test screener~~ fix(Popup): remove rotate(360deg) from PopupContent content styles Aug 22, 2022

YuanboXue-Amber added 2 commits August 23, 2022 10:23

chglog

d3f3a24

Merge branch 'master' into test-transform

c3fd70f

YuanboXue-Amber marked this pull request as ready for review August 23, 2022 10:24

YuanboXue-Amber requested a review from a team as a code owner August 23, 2022 10:24

layershifter approved these changes Aug 23, 2022

View reviewed changes

Merge branch 'master' into test-transform

fe08e03

YuanboXue-Amber enabled auto-merge (squash) September 8, 2022 15:45

YuanboXue-Amber merged commit dd50411 into microsoft:master Sep 8, 2022

khmakoto added Fluent UI react-northstar (v0) Work related to Fluent UI V0 and removed Fluent UI react-northstar labels Nov 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

YuanboXue-Amber commented Aug 19, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 19, 2022 •

edited

Loading

size-auditor bot commented Aug 19, 2022 •

edited

Loading

fabricteam commented Aug 19, 2022 •

edited

Loading

fabricteam commented Aug 19, 2022 •

edited

Loading

fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

Conversation

YuanboXue-Amber commented Aug 19, 2022 • edited Loading

Description

⚠️ This change can cause tiny shifts in UI

codesandbox-ci bot commented Aug 19, 2022 • edited Loading

size-auditor bot commented Aug 19, 2022 • edited Loading

Asset size changes

fabricteam commented Aug 19, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Aug 19, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

YuanboXue-Amber commented Aug 19, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 19, 2022 •

edited

Loading

size-auditor bot commented Aug 19, 2022 •

edited

Loading

fabricteam commented Aug 19, 2022 •

edited

Loading

fabricteam commented Aug 19, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)