us.flow.microsoft.com - “Insert a new step” button border is hardly visible

[softvision-oana-arbuzov]

URL: https://us.flow.microsoft.com/manage/environments/Default-96278e7e-99e9-4839-88c1-22a2a1dc70ab/flows/new?gallery=public&template=d62b2527bb5343d689d5107b0922e57b&connection.shared_office365=95d2a7e9-e4fe-467d-a092-4e47-de0982b6&connection.shared_sharepointonline=shared-sharepointonl-1d38b3fb-4389-423e-9944-8b2b72886aad&connection.shared_approvals=shared-approvals-399ac8c3-8f0d-4434-b16c-7272c65ab47f

Browser / Version: Firefox ESR 60.2.2esr Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: “Insert a new step” button border is hardly visible

Prerequisites:

1. Microsoft account (Enterprise) available and signed in.
2. Flow created (e.g “Button -> Condition,Response,Send me an email notification,Send me a mobile notification ”) Steps to Reproduce:
3. Navigate to https://us.flow.microsoft.com/manage/environments/Default-96278e7e-99e9-4839-88c1-22a2a1dc70ab/flows/new?gallery=public&template=d62b2527bb5343d689d5107b0922e57b&connection.shared_office365=95d2a7e9-e4fe-467d-a092-4e47-de0982b6&connection.shared_sharepointonline=shared-sharepointonl-1d38b3fb-4389-423e-9944-8b2b72886aad&connection.shared_approvals=shared-approvals-399ac8c3-8f0d-4434-b16c-7272c65ab47f
4. Hover over the down arrow, or in the “If yes/If no” section.
5. Observe “+” (“Insert a new step”) button.

Expected Behavior: The button border is fully visible.

Actual Behavior: The button border is hardly visible.

Note:

1. Reproducible on Firefox Nightly 64.0a1 (2018-10-18) and Firefox Release 62.0.3.
2. Not reproducible on Chrome 70.0.3538.67 and Microsoft Edge 41.16299.726.0.
3. Screenshot attached.

Affected area:

<button aria-label="Insert a new step" class="msla-button msla-connector-add-step-button" tabindex="-1" title="Insert a new step">
    <svg id="add" x="0px" y="0px" class="msla-connector-add-step-button-icon" viewBox="0 0 50 50" tabindex="0">
        <g id="border">
            <ellipse transform="matrix(0.9998 -0.0221 0.0221 0.9998 -0.5464 0.5586)" cx="25" cy="25" rx="25" ry="25"></ellipse>
        </g>
        <g id="circle">
            <ellipse class="msla-add-step-icon-background" transform="matrix(0.9998 -0.0221 0.0221 0.9998 -0.5464 0.5586)" cx="25" cy="25" rx="22.5" ry="22.5"></ellipse>
        </g>
        <g id="plus">
            <rect x="14" y="23.625" width="22" height="2.75"></rect>
            <rect x="23.625" y="14" width="2.75" height="22"></rect>
        </g>
    </svg>
</button>

Watchers: @softvision-sergiulogigan @softvision-oana-arbuzov

sv; type: enterprise-survey

From webcompat.com with ❤️

[karlcow]

no issue on a retina screen, but I'm pretty sure it is probably because of rounding. I don't think this is a webcompat issue. They could double check on computer with lower quality screen.

[adamopenweb]

Reached out to our contacts at Microsoft directly for these enterprise issues.

[cipriansv]

I retested the issue and it is still reproducible on my side.

Tested with: Browser / Version: Firefox ESR 60.7.1esr Operating System: Windows 10 Pro

[softvision-sergiulogigan]

The issue has been fixed.

Tested with: Browser / Version: Firefox Nightly 68.1a1 (2019-08-20), Firefox ESR 60.8.0esr Operating System: Windows 10 Pro