Open
Bug 1509202
Opened 6 years ago
Updated 2 years ago
Clicking Design Modus returns wrong Inner or Outer Width for element by 17px.
Categories
(DevTools :: Responsive Design Mode, defect, P3)
Tracking
(Not tracked)
NEW
People
(Reporter: info, Unassigned)
References
(Blocks 1 open bug)
Details
(Whiteboard: [rdm-reserve] [dt-q])
Attachments
(6 files, 1 obsolete file)
designmodus.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Steps to reproduce:
Hi
i target a element
function ThemeForceFullWith() {
var headerInner=jQuery('#header .inner');
console.log(headerInner.width());
console.log(headerInner.outerWidth());
}
(function($) {
'use stict';
$(document).ready(function() {
ThemeGetWith();
$(window).resize(function() {
ThemeGetWith();
});
});
})(jQuery);
When clicking the Responsive Design modus i get the wrong value 17px offbase since we have the new small scrollbar in the design modus. However if i resize the window i get the correct values. Even in the design modus.
Turning off the design modus also returns the correct values.,
Tested in all other browsers i get the correct values.
In my case header .inner has only left and right padding set for 10px.
on reload of page the values are also correct
You can see it happen here
http://champion.backupsdemo.nl/
see attached image.
Actual results:
After click i get a value that is 17 px less then it should be.
on reload the page in design modus i get the correct values.
On leaving design modus i also get the correct values and resize the screen the old fashion way.
it only happens on entering design modus in FF windows !
Expected results:
the values should be 17px bigger ! The correct values should be returned calculating with the correct scrollbar width
sorry correct js code.... i made a typo.
function ThemeGetWith() {
var headerInner=jQuery('#header .inner');
console.log(headerInner.width());
console.log(headerInner.outerWidth());
}
(function($) {
'use stict';
$(document).ready(function() {
ThemeGetWith();
$(window).resize(function() {
ThemeGetWith();
});
});
})(jQuery);
|
||
Updated•6 years ago
|
Component: Untriaged → Responsive Design Mode
Product: Firefox → DevTools
I forgot to add the complete html code to test it. So here it is.
<!doctype html>
<html><head>
<meta charset="utf-8"><title>FireFox 1509202 Bug test.</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<style type="text/css">
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
fluid-width, time, mark, audio, video {
padding: 0;
margin: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
background-color: transparent;
border: 0;
outline: 0;
box-sizing:border-box;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type='text/javascript'>
function ThemeGetWith() {
var headerInner=jQuery('#header .inner');
console.log(headerInner.width());
console.log(headerInner.outerWidth());
}
(function($) {
'use stict';
$(document).ready(function() {
ThemeGetWith();
$(window).resize(function() {
ThemeGetWith();
});
});
})(jQuery);
</script>
</head>
<body>
<div id="body-wrapper">
<header id="header" style="background-color:#909090;position:relative;width:100%;padding: 10px;">
<div class="fluid-width" style="padding:10px 10px;background-color:#a0a0a0;">
<div class="inner" style="padding:0 10px; min-height=200px;width:auto;;margin:auto:0;background-color:#c0c0c0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus. Vitae elementum curabitur vitae nunc sed velit dignissim. Quisque non tellus orci ac auctor augue mauris augue neque. Dui sapien eget mi proin sed libero enim. Porttitor leo a diam sollicitudin tempor id. Magna etiam tempor orci eu lobortis elementum. Vestibulum mattis ullamcorper velit sed ullamcorper. Morbi tristique senectus et netus et malesuada fames. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Faucibus vitae aliquet nec ullamcorper sit amet. Tortor pretium viverra suspendisse potenti.
Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et ligula ullamcorper malesuada proin libero. Varius duis at consectetur lorem donec massa. Cras semper auctor neque vitae tempus quam pellentesque nec. Venenatis tellus in metus vulputate eu scelerisque felis. Molestie nunc non blandit massa enim nec dui nunc. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Consectetur libero id faucibus nisl tincidunt eget nullam. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec.
Suspendisse in est ante in nibh. Vivamus arcu felis bibendum ut tristique et. Diam maecenas ultricies mi eget mauris pharetra. Nisl nisi scelerisque eu ultrices vitae auctor eu. Aenean pharetra magna ac placerat vestibulum lectus. Et leo duis ut diam quam nulla porttitor massa. Sed nisi lacus sed viverra. Leo integer malesuada nunc vel risus commodo. Ut pharetra sit amet aliquam. Amet cursus sit amet dictum sit. Mauris pharetra et ultrices neque. Quam viverra orci sagittis eu volutpat odio. Eu turpis egestas pretium aenean pharetra. Bibendum est ultricies integer quis auctor elit sed vulputate. Faucibus et molestie ac feugiat sed lectus. In hac habitasse platea dictumst. Mauris sit amet massa vitae. Pharetra convallis posuere morbi leo urna molestie at elementum eu.
Turpis massa sed elementum tempus egestas sed sed risus. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Urna condimentum mattis pellentesque id nibh tortor. Porta nibh venenatis cras sed felis eget velit. Quam pellentesque nec nam aliquam sem et tortor consequat id. Tempus egestas sed sed risus pretium. Sed viverra ipsum nunc aliquet bibendum. Molestie at elementum eu facilisis sed odio morbi quis commodo. Ultrices neque ornare aenean euismod elementum nisi quis. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Elit eget gravida cum sociis natoque penatibus et magnis. Lorem dolor sed viverra ipsum.
Eros in cursus turpis massa tincidunt dui ut ornare lectus. Tortor consequat id porta nibh. Nulla aliquet porttitor lacus luctus. Eros in cursus turpis massa tincidunt dui. Nunc sed augue lacus viverra vitae congue eu consequat. Nascetur ridiculus mus mauris vitae ultricies leo integer. In nisl nisi scelerisque eu. Purus faucibus ornare suspendisse sed nisi. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Aliquam sem fringilla ut morbi. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Tincidunt ornare massa eget egestas purus viverra accumsan in. Vitae elementum curabitur vitae nunc sed velit dignissim. Fusce ut placerat orci nulla pellentesque. Dignissim convallis aenean et tortor at risus viverra adipiscing at. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Cursus metus aliquam eleifend mi in. Sit amet facilisis magna etiam tempor orci eu. Mattis pellentesque id nibh tortor id aliquet lectus.
</div>
</div>
</header>
</div>
</body>
</html>
Added the demo html file to test the issue so you can replicate.
see results on clicking the button and on reload of the page (f5)
Index html to test the issue. Also added getBoundingClientRect but unfortunately it has the same issue and is reporting the wring values on click of the reponsive Design modus button
Attachment #9026891 -
Attachment is obsolete: true
|
||
Updated•6 years ago
|
Whiteboard: [dt-q]
Hi Martin,
i am pretty new on this, but what does Whiteboard: [dt-q] mean?
Thank you !
|
|
||
Comment 7•6 years ago
|
||
Oh, dt-q stands for "devtools-quality". With this whiteboard marker I maintain a list of quality issues that are priority from a product management point of view. So, your report now made it on the list.
|
||
Comment 8•6 years ago
|
||
Hi BackuPs,
I tried the provided example (attached here as a file) and can't seem to understand the issue.
The 20px difference in values is expected in this example due to the `padding: 0 10px` on the div with class `.inner`
The jQuery methods used, `.width()` and `.outerWidth()` do subtly different things. From the jQuery docs:
- `outerWidth()`
http://api.jquery.com/outerwidth/#outerWidth2
"Get the current computed outer width (including padding, border, and optionally margin)"
- `width()`
http://api.jquery.com/width/
"Note that .width() will always return the content width"
(content width ignores padding and border)
As I understand it, `outerWidth()` is correct in returning a value 20px larger than `width()` because it includes the left & right padding.
I tested in Firefox Nightly 66.0a1 and the delta is 20px, as expected.
I tested in Chrome Canary and the delta is the same.
Using the Responsive Design Mode on both Firefox Nightly and Chrome Canary with an iPhone 6/7/8 portrait viewport logs the same two values in the console in both browsers:
315
335
Can you please clarify what you believe the is bug?
Flags: needinfo?(info)
|
|
||
Updated•6 years ago
|
Whiteboard: [dt-q]
Hi
Its not about the difference of 20 px between puter and inner width. Its about the wrong width outer and inner after pressing the design modus button/icon.
as explained with the attached images the width is incorrect by 17px. Exactly the size of the scrollbar for mobile devices.
click on the design modus button and goto mobile mode.
look in the error console you will see 243/263. Do not resize the screen/ window only press f5 to reload the page and look again in the error console you will see 260/280. Exactly 17 px more bigger! The latter values are the correct values.
This is a bug of FF.
It does not happen if you use chrome, IE, Opera, Edge, Safari
Only in FF.
See all my images attached. I cant explain any better or shall i do a screenshare by skype for you?
We tested this on i dont know how many machines and versions of FF even the developer version. All the same problem.
If you dont see the issue and 20 people do see it then you must be doing something different.
Let me know if you need any further assistance
Flags: needinfo?(info)
|
||
Comment 10•6 years ago
|
||
I have tested this on Windows, on various versions of Firefox.
Here were my steps:
- open attachment 9026896 [details] in a new tab
- open the console, clear it
- open RDM
- check the outer and inner width reported there
- refresh the page
- check the outer and inner width again
On Firefox 60 and 64, the values are indeed different as reported here (so I'm assuming this is the same on 61, 62, 63).
On Firefox 65 and 66, the behavior is different. The values are the same before and after refresh.
Note, however, that the steps are different too: once I open RDM for the first time, nothing is displayed in the console. Opening RDM doesn't trigger a resize event. So I have to manually call ThemeGetWidth() in the console to get the inner and outer sizes.
So, something changed in Firefox 65 that seems to fix this issue.
BackuPs: do you mind testing using either Firefox Beta or Firefox Developer Edition (which are both 65 right now)? And confirming that the issue is gone there?
That would be great.
(In reply to BackuPs from comment #9)
> See all my images attached. I cant explain any better or shall i do a
> screenshare by skype for you?
>
> We tested this on i dont know how many machines and versions of FF even the
> developer version. All the same problem.
>
> If you dont see the issue and 20 people do see it then you must be doing
> something different.
There is no need for that sort of tone here, everyone is simply trying their best to help, and so are you. So let's just all remain professional please.
Flags: needinfo?(info)
|
|
||
Comment 11•6 years ago
|
||
I can reproduce the bug fairly consistently on OS X with the latest m-c.
STR:
- Visit "System Preferences -> General -> Show scroll bars" and select "always"
- open the test file by the reporter
- open devtools, enable the console
- enable RDM and watch the reported values in the console. Make sure touch simulation is off
- refresh the page with RDM still enabled, check the reported values again
=> I get 15px difference reported
Notes:
- If scroll bars are not set to be always visible, I can't reproduce the issue
- If touch simulation is enabled, I get 2 resize events fired. The first one shows the wrong, the second the correct values
Please see the recorded video attached.
|
Reporter | |
Comment 12•6 years ago
|
||
i aplogise for my tone. my language is not english native. I ment that you are doing different steps then i do. I added "let me know if you need further assistance"
I will test later today in the developer version as i am not home atm.
Flags: needinfo?(info)
|
|
Reporter | |
Comment 13•6 years ago
|
||
i had machine in my neigbourhood i was allowed to use to test.
In developer 65.0b04 the issue is still there. On clicking design modus the outer and inner are 17px smaller then when i hit the reload button after clicking the design modus.
|
|
Reporter | |
Comment 14•6 years ago
|
||
|
|
||
Comment 15•6 years ago
|
||
Confirmed. I can reproduce the issue consistently with Martin's steps.
The snag seems to come from the touch simulation + always visible scrollbars (on macOS). When using one of the device presets, it will have touch simulation enabled. Setting dimensions manually and turning off touch simulation allows testing the alternate case.
The initial steps to reproduce and the issue title are easily confusing.
Thanks everyone for testing and clarifications!
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
|
|
Reporter | |
Comment 16•6 years ago
|
||
As said my native lang is not english and i made a typo in the title. the 20px should have been 17px. Which i discovered after posting. The confusion occured because the ampount of padding in the example was also 20px. I was ware of that but i thought the images added would have been enough to explain the problem.
Sorry about that.
Summary: Clicking Design Modus returns wrong Inner or Outer Width for element by 20px. → Clicking Design Modus returns wrong Inner or Outer Width for element by 17px.
|
||
Updated•6 years ago
|
Priority: P3 → P2
Whiteboard: [dt-q] → [rdm-mvp] [dt-q]
|
|
||
Updated•6 years ago
|
Priority: P2 → P3
Whiteboard: [rdm-mvp] [dt-q] → [rdm-reserve] [dt-q]
|
||
Updated•5 years ago
|
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Priority: P3 → P1
|
|
||
Comment 18•5 years ago
•
|
||
Some initial findings while testing this with attachment 9026896 [details] :
When we first open RDM, the viewport browser's content frame script is executed AFTER the "DOMContentLoaded" event has been fired. This means one thing: the calls to getBoundingClientRect(), width(), outerWidth(), etc... are happening before we load the overlay scrollbar stylesheet. This explains the initial 15px difference.
I can observe this by either:
- putting a
console.login the message handler for ResponsiveMode:Start. Observe that the outer width values are being printed before the console.log. - putting breaks point at Element::GetBoundingClientRect() and nsDOMWindowUtils::LoadSheet opening RDM. Observe that the breakpoint at GetBoundingRectClient is hit before LoadSheet.
Now when the page is refreshed while in RDM, I can observe the reverse for Element::GetBoundingClientRect() and nsDOMWindowUtils::LoadSheet, where loading the stylesheet happens before the call to getBoundingClientRect(). This gives us the correct values.
I think the next steps here are to track where and when the "DOMContentLoaded" event is being fired as the RDM UI is initialized. Perhaps it's possible we can apply this style sheet before the starting the frame script.
|
|
||
Updated•5 years ago
|
Assignee: mtigley → nobody
Status: ASSIGNED → NEW
Priority: P1 → P3
|
|
Reporter | |
Comment 19•5 years ago
|
||
Hi FF Dev-Team Guys,
Is there any ETA when this is going to be fixed? Please advice.
Kind regards !
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•