Firefox 60+ Getting wrong element width
I'm getting different in Firefox 64.0 (Linux x64) than I am in Chrome 69.0, Opera 55.0, and Waterfox 52.2.6 (which I assume is very similar to Firefox 52) to get the width of an element.
The element in question has a width of 258px, and all of the browsers agree on this except for Firefox. Firefox seems to be getting the width of the parent container for some reason.
I've been using .offsetWidth, but I also tried using .clientWidth and .getBoundingClientRect().width, which all return the same metrics.
Debugging logging statement:
console.log(sampleElement,
sampleElement.offsetWidth,
sampleElement.clientWidth,
sampleElement.getBoundingClientRect().width);
FF: {element} 1024 1024 1024
(the value changes according to the parent's width -- see below)
Chrome: {element} 258 258 258
Opera: {element} 258 258 258
Waterfox: {element} 258 258 258
where {element} is the HTML element in the console. In Firefox, interestingly, that representation is showing with the correct values for all of these width properties:
div.project-icon
// ..
clientWidth: 258
// ..
offsetWidth: 258
// ..
scrollWidth: 258
More information about the element:
- It is dynamically created, and inside a horizontally-scrollable flexbox, relatively-positioned container.
- The width that Firefox says it has is the width of the parent element plus 16px (but the parent element has no padding/margin).
Image of element in Firefox's Inspector:
I can't seem to reproduce the error in a snippet, but here is the code used to generate the element whose width I'm trying to get, and the code to get the width.
let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
let div = document.createElement('div');
div.classList.add('project-icon');
div.dataset.index = index;
div.addEventListener('click', function() {
debounceScrollHandler(this);
});
let image = document.createElement('img');
const images = ['https://imgur.com/BkvxnV5l.png'];
image.src = images[Math.floor(Math.random() * images.length)];
div.appendChild(image);
scrollContainer.appendChild(div);
});
let n = data.length;
let cur = Math.floor(n / 2);
// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);
console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);#project-scroller {
display: flex;
flex-direction: row;
width: 100%;
overflow-x: scroll;
position: relative;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
display: none;
}
.project-icon {
flex: 0 0 258px;
width: 258px;
height: 258px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.project-icon:first-child {
background-color: green;
}
.project-icon > img {
width: 128px;
height: 128px;
border-radius: 0.5em;
}
.project-icon.centered > img {
width: 256px;
height: 256px;
}<div id='project-scroller'></div>Update (from comments): My code works in FF versions 59 and earlier, but not 60 and later. Is this meaningful?
Update 2: I realized that if I set a small timeout (e.g., 10ms) and run the same code, the width is correct. Is it possible that there is some delay in getting the width from the CSS properties (the width is from the CSS class)?
javascript firefox width
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
|
show 2 more comments
I'm getting different in Firefox 64.0 (Linux x64) than I am in Chrome 69.0, Opera 55.0, and Waterfox 52.2.6 (which I assume is very similar to Firefox 52) to get the width of an element.
The element in question has a width of 258px, and all of the browsers agree on this except for Firefox. Firefox seems to be getting the width of the parent container for some reason.
I've been using .offsetWidth, but I also tried using .clientWidth and .getBoundingClientRect().width, which all return the same metrics.
Debugging logging statement:
console.log(sampleElement,
sampleElement.offsetWidth,
sampleElement.clientWidth,
sampleElement.getBoundingClientRect().width);
FF: {element} 1024 1024 1024
(the value changes according to the parent's width -- see below)
Chrome: {element} 258 258 258
Opera: {element} 258 258 258
Waterfox: {element} 258 258 258
where {element} is the HTML element in the console. In Firefox, interestingly, that representation is showing with the correct values for all of these width properties:
div.project-icon
// ..
clientWidth: 258
// ..
offsetWidth: 258
// ..
scrollWidth: 258
More information about the element:
- It is dynamically created, and inside a horizontally-scrollable flexbox, relatively-positioned container.
- The width that Firefox says it has is the width of the parent element plus 16px (but the parent element has no padding/margin).
Image of element in Firefox's Inspector:
I can't seem to reproduce the error in a snippet, but here is the code used to generate the element whose width I'm trying to get, and the code to get the width.
let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
let div = document.createElement('div');
div.classList.add('project-icon');
div.dataset.index = index;
div.addEventListener('click', function() {
debounceScrollHandler(this);
});
let image = document.createElement('img');
const images = ['https://imgur.com/BkvxnV5l.png'];
image.src = images[Math.floor(Math.random() * images.length)];
div.appendChild(image);
scrollContainer.appendChild(div);
});
let n = data.length;
let cur = Math.floor(n / 2);
// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);
console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);#project-scroller {
display: flex;
flex-direction: row;
width: 100%;
overflow-x: scroll;
position: relative;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
display: none;
}
.project-icon {
flex: 0 0 258px;
width: 258px;
height: 258px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.project-icon:first-child {
background-color: green;
}
.project-icon > img {
width: 128px;
height: 128px;
border-radius: 0.5em;
}
.project-icon.centered > img {
width: 256px;
height: 256px;
}<div id='project-scroller'></div>Update (from comments): My code works in FF versions 59 and earlier, but not 60 and later. Is this meaningful?
Update 2: I realized that if I set a small timeout (e.g., 10ms) and run the same code, the width is correct. Is it possible that there is some delay in getting the width from the CSS properties (the width is from the CSS class)?
javascript firefox width
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
I can share more code if you need.how about a minimal complete verifiable example
– Jaromanda X
Jan 1 at 1:42
@JaromandaX I can't seem to reproduce the issue in a code snippet here. Do you have any advice on how to proceed? I can't seem to think of a reason FF would give different values between the inspector and the JS values so I don't know where to start from here.
– Jonathan Lam
Jan 1 at 1:57
without seeing code (I mean HTML and CSS) that produces the inconsistency, I can't possibly guess what you've done wrong
– Jaromanda X
Jan 1 at 2:01
having said that, if it is some bug in firefox 64, have you tried firefox 63 ... or the developer version, firefox 65
– Jaromanda X
Jan 1 at 2:04
1
so the cause is something you're doing somewhere which you can't identify (because you cant' reproduce in an mcve) but only since version 60 of firefox - which seems to be when quantum css was introduced to firefox - looking at the developer release notes, it may well be something here
– Jaromanda X
Jan 1 at 2:36
|
show 2 more comments
I'm getting different in Firefox 64.0 (Linux x64) than I am in Chrome 69.0, Opera 55.0, and Waterfox 52.2.6 (which I assume is very similar to Firefox 52) to get the width of an element.
The element in question has a width of 258px, and all of the browsers agree on this except for Firefox. Firefox seems to be getting the width of the parent container for some reason.
I've been using .offsetWidth, but I also tried using .clientWidth and .getBoundingClientRect().width, which all return the same metrics.
Debugging logging statement:
console.log(sampleElement,
sampleElement.offsetWidth,
sampleElement.clientWidth,
sampleElement.getBoundingClientRect().width);
FF: {element} 1024 1024 1024
(the value changes according to the parent's width -- see below)
Chrome: {element} 258 258 258
Opera: {element} 258 258 258
Waterfox: {element} 258 258 258
where {element} is the HTML element in the console. In Firefox, interestingly, that representation is showing with the correct values for all of these width properties:
div.project-icon
// ..
clientWidth: 258
// ..
offsetWidth: 258
// ..
scrollWidth: 258
More information about the element:
- It is dynamically created, and inside a horizontally-scrollable flexbox, relatively-positioned container.
- The width that Firefox says it has is the width of the parent element plus 16px (but the parent element has no padding/margin).
Image of element in Firefox's Inspector:
I can't seem to reproduce the error in a snippet, but here is the code used to generate the element whose width I'm trying to get, and the code to get the width.
let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
let div = document.createElement('div');
div.classList.add('project-icon');
div.dataset.index = index;
div.addEventListener('click', function() {
debounceScrollHandler(this);
});
let image = document.createElement('img');
const images = ['https://imgur.com/BkvxnV5l.png'];
image.src = images[Math.floor(Math.random() * images.length)];
div.appendChild(image);
scrollContainer.appendChild(div);
});
let n = data.length;
let cur = Math.floor(n / 2);
// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);
console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);#project-scroller {
display: flex;
flex-direction: row;
width: 100%;
overflow-x: scroll;
position: relative;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
display: none;
}
.project-icon {
flex: 0 0 258px;
width: 258px;
height: 258px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.project-icon:first-child {
background-color: green;
}
.project-icon > img {
width: 128px;
height: 128px;
border-radius: 0.5em;
}
.project-icon.centered > img {
width: 256px;
height: 256px;
}<div id='project-scroller'></div>Update (from comments): My code works in FF versions 59 and earlier, but not 60 and later. Is this meaningful?
Update 2: I realized that if I set a small timeout (e.g., 10ms) and run the same code, the width is correct. Is it possible that there is some delay in getting the width from the CSS properties (the width is from the CSS class)?
javascript firefox width
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
I'm getting different in Firefox 64.0 (Linux x64) than I am in Chrome 69.0, Opera 55.0, and Waterfox 52.2.6 (which I assume is very similar to Firefox 52) to get the width of an element.
The element in question has a width of 258px, and all of the browsers agree on this except for Firefox. Firefox seems to be getting the width of the parent container for some reason.
I've been using .offsetWidth, but I also tried using .clientWidth and .getBoundingClientRect().width, which all return the same metrics.
Debugging logging statement:
console.log(sampleElement,
sampleElement.offsetWidth,
sampleElement.clientWidth,
sampleElement.getBoundingClientRect().width);
FF: {element} 1024 1024 1024
(the value changes according to the parent's width -- see below)
Chrome: {element} 258 258 258
Opera: {element} 258 258 258
Waterfox: {element} 258 258 258
where {element} is the HTML element in the console. In Firefox, interestingly, that representation is showing with the correct values for all of these width properties:
div.project-icon
// ..
clientWidth: 258
// ..
offsetWidth: 258
// ..
scrollWidth: 258
More information about the element:
- It is dynamically created, and inside a horizontally-scrollable flexbox, relatively-positioned container.
- The width that Firefox says it has is the width of the parent element plus 16px (but the parent element has no padding/margin).
Image of element in Firefox's Inspector:
I can't seem to reproduce the error in a snippet, but here is the code used to generate the element whose width I'm trying to get, and the code to get the width.
let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
let div = document.createElement('div');
div.classList.add('project-icon');
div.dataset.index = index;
div.addEventListener('click', function() {
debounceScrollHandler(this);
});
let image = document.createElement('img');
const images = ['https://imgur.com/BkvxnV5l.png'];
image.src = images[Math.floor(Math.random() * images.length)];
div.appendChild(image);
scrollContainer.appendChild(div);
});
let n = data.length;
let cur = Math.floor(n / 2);
// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);
console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);#project-scroller {
display: flex;
flex-direction: row;
width: 100%;
overflow-x: scroll;
position: relative;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
display: none;
}
.project-icon {
flex: 0 0 258px;
width: 258px;
height: 258px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.project-icon:first-child {
background-color: green;
}
.project-icon > img {
width: 128px;
height: 128px;
border-radius: 0.5em;
}
.project-icon.centered > img {
width: 256px;
height: 256px;
}<div id='project-scroller'></div>Update (from comments): My code works in FF versions 59 and earlier, but not 60 and later. Is this meaningful?
Update 2: I realized that if I set a small timeout (e.g., 10ms) and run the same code, the width is correct. Is it possible that there is some delay in getting the width from the CSS properties (the width is from the CSS class)?
let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
let div = document.createElement('div');
div.classList.add('project-icon');
div.dataset.index = index;
div.addEventListener('click', function() {
debounceScrollHandler(this);
});
let image = document.createElement('img');
const images = ['https://imgur.com/BkvxnV5l.png'];
image.src = images[Math.floor(Math.random() * images.length)];
div.appendChild(image);
scrollContainer.appendChild(div);
});
let n = data.length;
let cur = Math.floor(n / 2);
// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);
console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);#project-scroller {
display: flex;
flex-direction: row;
width: 100%;
overflow-x: scroll;
position: relative;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
display: none;
}
.project-icon {
flex: 0 0 258px;
width: 258px;
height: 258px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.project-icon:first-child {
background-color: green;
}
.project-icon > img {
width: 128px;
height: 128px;
border-radius: 0.5em;
}
.project-icon.centered > img {
width: 256px;
height: 256px;
}<div id='project-scroller'></div>let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
let div = document.createElement('div');
div.classList.add('project-icon');
div.dataset.index = index;
div.addEventListener('click', function() {
debounceScrollHandler(this);
});
let image = document.createElement('img');
const images = ['https://imgur.com/BkvxnV5l.png'];
image.src = images[Math.floor(Math.random() * images.length)];
div.appendChild(image);
scrollContainer.appendChild(div);
});
let n = data.length;
let cur = Math.floor(n / 2);
// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);
console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);#project-scroller {
display: flex;
flex-direction: row;
width: 100%;
overflow-x: scroll;
position: relative;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
display: none;
}
.project-icon {
flex: 0 0 258px;
width: 258px;
height: 258px;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.project-icon:first-child {
background-color: green;
}
.project-icon > img {
width: 128px;
height: 128px;
border-radius: 0.5em;
}
.project-icon.centered > img {
width: 256px;
height: 256px;
}<div id='project-scroller'></div>javascript firefox width
javascript firefox width
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
edited Jan 2 at 15:25
Jonathan Lam
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
asked Jan 1 at 1:36
Jonathan LamJonathan Lam
10.9k134377
10.9k134377
I can share more code if you need.how about a minimal complete verifiable example
– Jaromanda X
Jan 1 at 1:42
@JaromandaX I can't seem to reproduce the issue in a code snippet here. Do you have any advice on how to proceed? I can't seem to think of a reason FF would give different values between the inspector and the JS values so I don't know where to start from here.
– Jonathan Lam
Jan 1 at 1:57
without seeing code (I mean HTML and CSS) that produces the inconsistency, I can't possibly guess what you've done wrong
– Jaromanda X
Jan 1 at 2:01
having said that, if it is some bug in firefox 64, have you tried firefox 63 ... or the developer version, firefox 65
– Jaromanda X
Jan 1 at 2:04
1
so the cause is something you're doing somewhere which you can't identify (because you cant' reproduce in an mcve) but only since version 60 of firefox - which seems to be when quantum css was introduced to firefox - looking at the developer release notes, it may well be something here
– Jaromanda X
Jan 1 at 2:36
|
show 2 more comments
I can share more code if you need.how about a minimal complete verifiable example
– Jaromanda X
Jan 1 at 1:42
@JaromandaX I can't seem to reproduce the issue in a code snippet here. Do you have any advice on how to proceed? I can't seem to think of a reason FF would give different values between the inspector and the JS values so I don't know where to start from here.
– Jonathan Lam
Jan 1 at 1:57
without seeing code (I mean HTML and CSS) that produces the inconsistency, I can't possibly guess what you've done wrong
– Jaromanda X
Jan 1 at 2:01
having said that, if it is some bug in firefox 64, have you tried firefox 63 ... or the developer version, firefox 65
– Jaromanda X
Jan 1 at 2:04
1
so the cause is something you're doing somewhere which you can't identify (because you cant' reproduce in an mcve) but only since version 60 of firefox - which seems to be when quantum css was introduced to firefox - looking at the developer release notes, it may well be something here
– Jaromanda X
Jan 1 at 2:36
I can share more code if you need. how about a minimal complete verifiable example– Jaromanda X
Jan 1 at 1:42
I can share more code if you need. how about a minimal complete verifiable example– Jaromanda X
Jan 1 at 1:42
@JaromandaX I can't seem to reproduce the issue in a code snippet here. Do you have any advice on how to proceed? I can't seem to think of a reason FF would give different values between the inspector and the JS values so I don't know where to start from here.
– Jonathan Lam
Jan 1 at 1:57
@JaromandaX I can't seem to reproduce the issue in a code snippet here. Do you have any advice on how to proceed? I can't seem to think of a reason FF would give different values between the inspector and the JS values so I don't know where to start from here.
– Jonathan Lam
Jan 1 at 1:57
without seeing code (I mean HTML and CSS) that produces the inconsistency, I can't possibly guess what you've done wrong
– Jaromanda X
Jan 1 at 2:01
without seeing code (I mean HTML and CSS) that produces the inconsistency, I can't possibly guess what you've done wrong
– Jaromanda X
Jan 1 at 2:01
having said that, if it is some bug in firefox 64, have you tried firefox 63 ... or the developer version, firefox 65
– Jaromanda X
Jan 1 at 2:04
having said that, if it is some bug in firefox 64, have you tried firefox 63 ... or the developer version, firefox 65
– Jaromanda X
Jan 1 at 2:04
1
1
so the cause is something you're doing somewhere which you can't identify (because you cant' reproduce in an mcve) but only since version 60 of firefox - which seems to be when quantum css was introduced to firefox - looking at the developer release notes, it may well be something here
– Jaromanda X
Jan 1 at 2:36
so the cause is something you're doing somewhere which you can't identify (because you cant' reproduce in an mcve) but only since version 60 of firefox - which seems to be when quantum css was introduced to firefox - looking at the developer release notes, it may well be something here
– Jaromanda X
Jan 1 at 2:36
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992531%2ffirefox-60-getting-wrong-element-width%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992531%2ffirefox-60-getting-wrong-element-width%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I can share more code if you need.how about a minimal complete verifiable example– Jaromanda X
Jan 1 at 1:42
@JaromandaX I can't seem to reproduce the issue in a code snippet here. Do you have any advice on how to proceed? I can't seem to think of a reason FF would give different values between the inspector and the JS values so I don't know where to start from here.
– Jonathan Lam
Jan 1 at 1:57
without seeing code (I mean HTML and CSS) that produces the inconsistency, I can't possibly guess what you've done wrong
– Jaromanda X
Jan 1 at 2:01
having said that, if it is some bug in firefox 64, have you tried firefox 63 ... or the developer version, firefox 65
– Jaromanda X
Jan 1 at 2:04
1
so the cause is something you're doing somewhere which you can't identify (because you cant' reproduce in an mcve) but only since version 60 of firefox - which seems to be when quantum css was introduced to firefox - looking at the developer release notes, it may well be something here
– Jaromanda X
Jan 1 at 2:36