window.innerWidth - workaround for when it returns the wrong valueAltering contents when loading iframesDetecting when the contents of a web page changesGet the value of the name attribute of each element with class=“class”Switching some text labels when the first image of a carousel is activewhen we need to add some javascript code to html, where we have to put it?Filling in comment replies when link is clickedJavascript node/react web developer interview codeFunction that returns value based on specific categoryAdd the number of descendants for each li nodeChanging the text of a few elements when a tile is clicked
Why should universal income be universal?
What kind of floor tile is this?
Why is the "ls" command showing permissions of files in a FAT32 partition?
15% tax on $7.5k earnings. Is that right?
Mimic lecturing on blackboard, facing audience
What is the difference between lands and mana?
Does the reader need to like the PoV character?
Can I cause damage to electrical appliances by unplugging them when they are turned on?
Did the UK lift the requirement for registering SIM cards?
Is it allowed to activate the ability of multiple planeswalkers in a single turn?
What to do when eye contact makes your coworker uncomfortable?
What is going on with gets(stdin) on the site coderbyte?
How do I tell my boss that I'm quitting soon, especially given that a colleague just left this week
US tourist/student visa
Non-trope happy ending?
How to get directions in deep space?
Why is it that I can sometimes guess the next note?
Why does Carol not get rid of the Kree symbol on her suit when she changes its colours?
Is there a nicer/politer/more positive alternative for "negates"?
Is there a RAID 0 Equivalent for RAM?
Taxes on Dividends in a Roth IRA
Stack Interview Code methods made from class Node and Smart Pointers
Why do ¬, ∀ and ∃ have the same precedence?
Shouldn’t conservatives embrace universal basic income?
window.innerWidth - workaround for when it returns the wrong value
Altering contents when loading iframesDetecting when the contents of a web page changesGet the value of the name attribute of each element with class=“class”Switching some text labels when the first image of a carousel is activewhen we need to add some javascript code to html, where we have to put it?Filling in comment replies when link is clickedJavascript node/react web developer interview codeFunction that returns value based on specific categoryAdd the number of descendants for each li nodeChanging the text of a few elements when a tile is clicked
$begingroup$
- Some JavaScript libraries relies on window
innerWidth
andinnerHeight
to do their calculations window.innerWidth
is not 100% reliable, which may lead to bugsmatchMedia().matches
is 100% accurate but it returns a boolean value- come around: use
matchMedia
to verifywindow.innerWidth
value; if it returns false usematchMedia
to do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth
. In cases where I had some media queries the return value of window.innerWidth
used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches
always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia
.
I created a function getCorrectDimension
that performs a binary search around the window innerWidth
(or innerHeight
) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end)
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`($dim: $guesspx)`).matches)
return guess
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-$dim: $guesspx)`).matches
? bin(guess, end)
: bin(start, guess)
const getCorrectDimension = (dim = 'width', range = 300) =>
if(dim !== 'width' && dim !== 'height')
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`($dim: $window[prop]px)`).matches)
return window[prop]
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
javascript dom
$endgroup$
bumped to the homepage by Community♦ 5 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
$begingroup$
- Some JavaScript libraries relies on window
innerWidth
andinnerHeight
to do their calculations window.innerWidth
is not 100% reliable, which may lead to bugsmatchMedia().matches
is 100% accurate but it returns a boolean value- come around: use
matchMedia
to verifywindow.innerWidth
value; if it returns false usematchMedia
to do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth
. In cases where I had some media queries the return value of window.innerWidth
used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches
always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia
.
I created a function getCorrectDimension
that performs a binary search around the window innerWidth
(or innerHeight
) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end)
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`($dim: $guesspx)`).matches)
return guess
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-$dim: $guesspx)`).matches
? bin(guess, end)
: bin(start, guess)
const getCorrectDimension = (dim = 'width', range = 300) =>
if(dim !== 'width' && dim !== 'height')
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`($dim: $window[prop]px)`).matches)
return window[prop]
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
javascript dom
$endgroup$
bumped to the homepage by Community♦ 5 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
$begingroup$
- Some JavaScript libraries relies on window
innerWidth
andinnerHeight
to do their calculations window.innerWidth
is not 100% reliable, which may lead to bugsmatchMedia().matches
is 100% accurate but it returns a boolean value- come around: use
matchMedia
to verifywindow.innerWidth
value; if it returns false usematchMedia
to do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth
. In cases where I had some media queries the return value of window.innerWidth
used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches
always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia
.
I created a function getCorrectDimension
that performs a binary search around the window innerWidth
(or innerHeight
) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end)
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`($dim: $guesspx)`).matches)
return guess
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-$dim: $guesspx)`).matches
? bin(guess, end)
: bin(start, guess)
const getCorrectDimension = (dim = 'width', range = 300) =>
if(dim !== 'width' && dim !== 'height')
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`($dim: $window[prop]px)`).matches)
return window[prop]
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
javascript dom
$endgroup$
- Some JavaScript libraries relies on window
innerWidth
andinnerHeight
to do their calculations window.innerWidth
is not 100% reliable, which may lead to bugsmatchMedia().matches
is 100% accurate but it returns a boolean value- come around: use
matchMedia
to verifywindow.innerWidth
value; if it returns false usematchMedia
to do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth
. In cases where I had some media queries the return value of window.innerWidth
used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches
always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia
.
I created a function getCorrectDimension
that performs a binary search around the window innerWidth
(or innerHeight
) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end)
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`($dim: $guesspx)`).matches)
return guess
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-$dim: $guesspx)`).matches
? bin(guess, end)
: bin(start, guess)
const getCorrectDimension = (dim = 'width', range = 300) =>
if(dim !== 'width' && dim !== 'height')
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`($dim: $window[prop]px)`).matches)
return window[prop]
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
javascript dom
javascript dom
edited Feb 19 at 3:56
Jamal♦
30.4k11121227
30.4k11121227
asked Feb 18 at 22:38
buzattobuzatto
61
61
bumped to the homepage by Community♦ 5 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 5 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
$begingroup$
I have never seen innerWidth
or innerHeight
report the wrong value. There are a few bugs listed for chrome and firefox but they are all closed.
Could you provide any evidence?
UPDATE
Media query matches down to fractions of a CSS pixel while innerWidth
returns integer CSS pixel values. This is a problem when devicePixelRatio !== devicePixelRatio | 0
I tried to find a cover all solution, but too much time need to complete so I withdraw the answers content.
$endgroup$
$begingroup$
example of the issue: at link if you attach an event listener likewindow.addEventListener('resize', () => console.log(window.innerWidth))
, you can seewindow.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened atreact-sizes
link.
$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
@buzatto The only way i can getinnerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such thatmatchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true butmatchMedia(
(width: $innerWidthpx)).matches
is false. It's notinnerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail ifdevicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.
$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
@buzatto Your code as it is in the question can fail if therange
argument is smaller than the error eginnerWidth
reports 1000, media query passes 1016 andrange
is 10. Also fails on latest Chrome (win10) on somedevicePixelRatio
non integer values. EgdevicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.
$endgroup$
– Blindman67
Feb 20 at 2:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");
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: "196"
;
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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%2fcodereview.stackexchange.com%2fquestions%2f213760%2fwindow-innerwidth-workaround-for-when-it-returns-the-wrong-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
$begingroup$
I have never seen innerWidth
or innerHeight
report the wrong value. There are a few bugs listed for chrome and firefox but they are all closed.
Could you provide any evidence?
UPDATE
Media query matches down to fractions of a CSS pixel while innerWidth
returns integer CSS pixel values. This is a problem when devicePixelRatio !== devicePixelRatio | 0
I tried to find a cover all solution, but too much time need to complete so I withdraw the answers content.
$endgroup$
$begingroup$
example of the issue: at link if you attach an event listener likewindow.addEventListener('resize', () => console.log(window.innerWidth))
, you can seewindow.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened atreact-sizes
link.
$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
@buzatto The only way i can getinnerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such thatmatchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true butmatchMedia(
(width: $innerWidthpx)).matches
is false. It's notinnerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail ifdevicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.
$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
@buzatto Your code as it is in the question can fail if therange
argument is smaller than the error eginnerWidth
reports 1000, media query passes 1016 andrange
is 10. Also fails on latest Chrome (win10) on somedevicePixelRatio
non integer values. EgdevicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.
$endgroup$
– Blindman67
Feb 20 at 2:44
add a comment |
$begingroup$
I have never seen innerWidth
or innerHeight
report the wrong value. There are a few bugs listed for chrome and firefox but they are all closed.
Could you provide any evidence?
UPDATE
Media query matches down to fractions of a CSS pixel while innerWidth
returns integer CSS pixel values. This is a problem when devicePixelRatio !== devicePixelRatio | 0
I tried to find a cover all solution, but too much time need to complete so I withdraw the answers content.
$endgroup$
$begingroup$
example of the issue: at link if you attach an event listener likewindow.addEventListener('resize', () => console.log(window.innerWidth))
, you can seewindow.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened atreact-sizes
link.
$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
@buzatto The only way i can getinnerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such thatmatchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true butmatchMedia(
(width: $innerWidthpx)).matches
is false. It's notinnerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail ifdevicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.
$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
@buzatto Your code as it is in the question can fail if therange
argument is smaller than the error eginnerWidth
reports 1000, media query passes 1016 andrange
is 10. Also fails on latest Chrome (win10) on somedevicePixelRatio
non integer values. EgdevicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.
$endgroup$
– Blindman67
Feb 20 at 2:44
add a comment |
$begingroup$
I have never seen innerWidth
or innerHeight
report the wrong value. There are a few bugs listed for chrome and firefox but they are all closed.
Could you provide any evidence?
UPDATE
Media query matches down to fractions of a CSS pixel while innerWidth
returns integer CSS pixel values. This is a problem when devicePixelRatio !== devicePixelRatio | 0
I tried to find a cover all solution, but too much time need to complete so I withdraw the answers content.
$endgroup$
I have never seen innerWidth
or innerHeight
report the wrong value. There are a few bugs listed for chrome and firefox but they are all closed.
Could you provide any evidence?
UPDATE
Media query matches down to fractions of a CSS pixel while innerWidth
returns integer CSS pixel values. This is a problem when devicePixelRatio !== devicePixelRatio | 0
I tried to find a cover all solution, but too much time need to complete so I withdraw the answers content.
edited Feb 20 at 0:58
answered Feb 19 at 10:50
Blindman67Blindman67
8,6881521
8,6881521
$begingroup$
example of the issue: at link if you attach an event listener likewindow.addEventListener('resize', () => console.log(window.innerWidth))
, you can seewindow.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened atreact-sizes
link.
$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
@buzatto The only way i can getinnerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such thatmatchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true butmatchMedia(
(width: $innerWidthpx)).matches
is false. It's notinnerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail ifdevicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.
$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
@buzatto Your code as it is in the question can fail if therange
argument is smaller than the error eginnerWidth
reports 1000, media query passes 1016 andrange
is 10. Also fails on latest Chrome (win10) on somedevicePixelRatio
non integer values. EgdevicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.
$endgroup$
– Blindman67
Feb 20 at 2:44
add a comment |
$begingroup$
example of the issue: at link if you attach an event listener likewindow.addEventListener('resize', () => console.log(window.innerWidth))
, you can seewindow.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened atreact-sizes
link.
$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
@buzatto The only way i can getinnerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such thatmatchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true butmatchMedia(
(width: $innerWidthpx)).matches
is false. It's notinnerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail ifdevicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.
$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
@buzatto Your code as it is in the question can fail if therange
argument is smaller than the error eginnerWidth
reports 1000, media query passes 1016 andrange
is 10. Also fails on latest Chrome (win10) on somedevicePixelRatio
non integer values. EgdevicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.
$endgroup$
– Blindman67
Feb 20 at 2:44
$begingroup$
example of the issue: at link if you attach an event listener like
window.addEventListener('resize', () => console.log(window.innerWidth))
, you can see window.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened at react-sizes
link.$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
example of the issue: at link if you attach an event listener like
window.addEventListener('resize', () => console.log(window.innerWidth))
, you can see window.innerWidth
value make jumps around 950px, a place with a media query breakpoint. you can play around and look into other sites. I started to look recently into this when checking an issue opened at react-sizes
link.$endgroup$
– buzatto
Feb 19 at 21:24
$begingroup$
@buzatto The only way i can get
innerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such that matchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true but matchMedia(
(width: $innerWidthpx)).matches
is false. It's not innerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail if devicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
@buzatto The only way i can get
innerWidth
to not match the media query is to use a zoom that results in a fractional pixel size such that matchMedia(
(min-width: $innerWidth-1px) and (max-width: $innerWidth+1px)).matches
is true but matchMedia(
(width: $innerWidthpx)).matches
is false. It's not innerWidth
that is at fault but the media query. The spec is ambiguous, I will update answer when i have done further research. As it stands searching for a matching integer size will fail if devicePixelRatio !== devicePixelRatio | 0
or the scroll bar size has the same condition.$endgroup$
– Blindman67
Feb 19 at 23:21
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
you said that it had bugs related to chrome and firefox before, but not anymore. I mostly use chrome on daily basis, I tested now on firefox and edge, no apparent issue on them everything is fine, but on chrome there is 16 px jump on average on that example link. I also have a personal project and only on chrome I see jumps as well, not on firefox or edge.
$endgroup$
– buzatto
Feb 20 at 1:27
$begingroup$
@buzatto Your code as it is in the question can fail if the
range
argument is smaller than the error eg innerWidth
reports 1000, media query passes 1016 and range
is 10. Also fails on latest Chrome (win10) on some devicePixelRatio
non integer values. Eg devicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.$endgroup$
– Blindman67
Feb 20 at 2:44
$begingroup$
@buzatto Your code as it is in the question can fail if the
range
argument is smaller than the error eg innerWidth
reports 1000, media query passes 1016 and range
is 10. Also fails on latest Chrome (win10) on some devicePixelRatio
non integer values. Eg devicePixelRatio = 1.100000036
(menu setting 110%) the media query matched 1427.6px but not 1428px the closest integer value (I forget the exact values). When it fails it throws a call stack overflow.$endgroup$
– Blindman67
Feb 20 at 2:44
add a comment |
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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%2fcodereview.stackexchange.com%2fquestions%2f213760%2fwindow-innerwidth-workaround-for-when-it-returns-the-wrong-value%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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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