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

Jump to bottom

www.microsoft.com - Missing space between “Submit” button and bottom of the “Site Feedback” window #46053

Closed
softvision-oana-arbuzov opened this issue Dec 6, 2019 · 4 comments
Closed

www.microsoft.com - Missing space between “Submit” button and bottom of the “Site Feedback” window #46053

softvision-oana-arbuzov opened this issue Dec 6, 2019 · 4 comments
Labels
action-needstestcase This requires to create a minimized testcase browser-firefox-mobile engine-gecko The browser uses the Gecko rendering engine form-v2-experiment priority-critical severity-minor The site has a cosmetic issue.
Milestone
duplicate

Comments

@softvision-oana-arbuzov
Copy link
Member

URL: https://www.microsoft.com/en-us/store/b/windows?icid=TopNavSoftwareWindows&activetab=tab%3ashopwindows10

Browser / Version: Firefox Preview Nightly 191205 (🦎: 72.0a1-20191202091209), Firefox Nightly 73.0a1 (2019-12-04)
Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density)
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
1. Navigate https://www.microsoft.com/en-us/store/b/windows?icid=TopNavSoftwareWindows&activetab=tab%3ashopwindows10
2. Dismiss “Newsletter sign up” popup if displayed.
3. Tap “Site feedback” button.
4. Observe “Submit” buttom.

Expected Behavior:
The button is at a fair distance from the bottom edge of the window.

Actual Behavior:
The button is almost on the bottom edge of the window.

Note
1. Not reproducible on Chrome 78.0.3904.108
2. Screenshot attached.

Affected area:

<button data-m="{&quot;cN&quot;:&quot;R1Feedback-submit&quot;,&quot;id&quot;:&quot;nn6c2m5r1a3&quot;,&quot;sN&quot;:6,&quot;aN&quot;:&quot;c2m5r1a3&quot;}" id="R1Feedback-submit" class="c-button x-submit" type="button" data-js-dialog-hide="" data-bi-mto="true">Submit</button>

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

sv;
Screenshot Description

Browser Configuration
  • None

From webcompat.com with ❤️
@webcompat-bot webcompat-bot added this to the needstriage milestone Dec 6, 2019
@softvision-oana-arbuzov softvision-oana-arbuzov changed the title www.microsoft.com - design is broken www.microsoft.com - Missing space between “Submit” button and bottom of the “Site Feedback” window Dec 6, 2019
@karlcow karlcow added the action-needstestcase This requires to create a minimized testcase label Dec 9, 2019
@karlcow
Copy link
Member

karlcow commented Dec 9, 2019

So in Chrome it seems the overflow computation takes into consideration the margin/padding under the submit button, but not firefox. This needs a reduced test case.

@karlcow
Copy link
Member

karlcow commented Dec 9, 2019

btw this is happening on desktop too if we make the window shorter enough.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    section {background-color: #fc0;
        height: 100px;
        padding: 50px;
        width: 200px;
        overflow: auto;}
    .block {background-color: brown;
    height: 200px;}
    button {
        background-color: pink;
    }
    </style>
</head>

<body>
    <section>
            <div class="block"></div>
            <div class="c-group">
                <button type="button">Submit</button>
            </div>
        <!-- </form> -->
    </section>
</body>

</html>

https://codepen.io/webcompat/pen/KKwVMZb

I'm pretty sure Mozilla has already an open issue about that.
Ah yes probably this one.
https://bugzilla.mozilla.org/show_bug.cgi?id=47710

Screenshot Description

@karlcow
Copy link
Member

karlcow commented Dec 9, 2019

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=47710

@lock
Copy link

lock bot commented Dec 16, 2019

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.

@lock lock bot locked as resolved and limited conversation to collaborators Dec 16, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
action-needstestcase This requires to create a minimized testcase browser-firefox-mobile engine-gecko The browser uses the Gecko rendering engine form-v2-experiment priority-critical severity-minor The site has a cosmetic issue.
Projects
None yet
Milestone
duplicate
Development

No branches or pull requests
3 participants
@karlcow @webcompat-bot @softvision-oana-arbuzov