Strange CSS behavior on dual display setup
It's hard for me to point to the exact issue, but the problem is following:
CSS works fine with any setup I've tested (mobile, different resolutions [inc. maximize and manual resize], screen color depth, etc)
The problem starts when I maximize the page only when I have multiple monitors connected. This not happen, for example when I have laptop and monitor setup. Only two connected monitors.
Now, it's enough to make it a bit less (resize manual) everything returns to the perfect order. But maximization (as well as splitting the page between two monitors) causes problem.
The thing is that it is not clear what the problem is. All css rendered correctly, no canceled css, nothing. It just brakes.
Any ideas?
Here the live URL for test (system is alive)
UPDATE The reason was strange behavior of media query max width and min width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500.
Issue is fixed by increasing max-width to 10K
css sass
edited Jan 1 at 23:19
Alireza
1,0771924
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
add a comment |
It's hard for me to point to the exact issue, but the problem is following:
CSS works fine with any setup I've tested (mobile, different resolutions [inc. maximize and manual resize], screen color depth, etc)
The problem starts when I maximize the page only when I have multiple monitors connected. This not happen, for example when I have laptop and monitor setup. Only two connected monitors.
Now, it's enough to make it a bit less (resize manual) everything returns to the perfect order. But maximization (as well as splitting the page between two monitors) causes problem.
The thing is that it is not clear what the problem is. All css rendered correctly, no canceled css, nothing. It just brakes.
Any ideas?
Here the live URL for test (system is alive)
UPDATE The reason was strange behavior of media query max width and min width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500.
Issue is fixed by increasing max-width to 10K
css sass
edited Jan 1 at 23:19
Alireza
1,0771924
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
1
Does the problem happen on any browser? You are not being clear on what's the problem (you just say there's a problem and the css "breaks" and posted a link to your site), add a picture, something, and check the guidelines to add an minimal example to reproduce the problem, it's hard to tell inspecting a whole site.
– arieljuod
Dec 31 '18 at 12:55
@arieljuod you are correct. This is Chrome. Here the screenshots imgur.com/a/VPNL3r7 as you can see the only different is maximize on dual monitor. resolution is the same. The same issue also happen if i split it (in any size) between monitors
– Tamir
Dec 31 '18 at 12:59
Did you try with Firefox/Edge/Safari? maybe you don't have a CSS problem but something on Chrome is messing things up. I don't have two monitors to try it though, check if this is a crossbrowser issue or just chrome. Also, try to add a minimal example to reproduce the problem (or at leeeeast the related html and css code). Check SO guidelines to ask questions.
– arieljuod
Dec 31 '18 at 13:05
The problem is the same for Firefox and Safari. I would love to build small reproducible sample, if I would know at least the direction of the problem. But I am clueless at this time... This is all looks very very strange
– Tamir
Dec 31 '18 at 13:23
add a comment |
It's hard for me to point to the exact issue, but the problem is following:
CSS works fine with any setup I've tested (mobile, different resolutions [inc. maximize and manual resize], screen color depth, etc)
The problem starts when I maximize the page only when I have multiple monitors connected. This not happen, for example when I have laptop and monitor setup. Only two connected monitors.
Now, it's enough to make it a bit less (resize manual) everything returns to the perfect order. But maximization (as well as splitting the page between two monitors) causes problem.
The thing is that it is not clear what the problem is. All css rendered correctly, no canceled css, nothing. It just brakes.
Any ideas?
Here the live URL for test (system is alive)
UPDATE The reason was strange behavior of media query max width and min width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500.
Issue is fixed by increasing max-width to 10K
css sass
edited Jan 1 at 23:19
Alireza
1,0771924
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
It's hard for me to point to the exact issue, but the problem is following:
CSS works fine with any setup I've tested (mobile, different resolutions [inc. maximize and manual resize], screen color depth, etc)
The problem starts when I maximize the page only when I have multiple monitors connected. This not happen, for example when I have laptop and monitor setup. Only two connected monitors.
Now, it's enough to make it a bit less (resize manual) everything returns to the perfect order. But maximization (as well as splitting the page between two monitors) causes problem.
The thing is that it is not clear what the problem is. All css rendered correctly, no canceled css, nothing. It just brakes.
Any ideas?
Here the live URL for test (system is alive)
UPDATE The reason was strange behavior of media query max width and min width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500.
Issue is fixed by increasing max-width to 10K
css sass
css sass
edited Jan 1 at 23:19
Alireza
1,0771924
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
edited Jan 1 at 23:19
Alireza
1,0771924
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
edited Jan 1 at 23:19
Alireza
1,0771924
edited Jan 1 at 23:19
Alireza
1,0771924
edited Jan 1 at 23:19
Alireza
1,0771924
1,0771924
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
asked Dec 31 '18 at 12:50
TamirTamir
2,1051321
2,1051321
1
Does the problem happen on any browser? You are not being clear on what's the problem (you just say there's a problem and the css "breaks" and posted a link to your site), add a picture, something, and check the guidelines to add an minimal example to reproduce the problem, it's hard to tell inspecting a whole site.
– arieljuod
Dec 31 '18 at 12:55
@arieljuod you are correct. This is Chrome. Here the screenshots imgur.com/a/VPNL3r7 as you can see the only different is maximize on dual monitor. resolution is the same. The same issue also happen if i split it (in any size) between monitors
– Tamir
Dec 31 '18 at 12:59
Did you try with Firefox/Edge/Safari? maybe you don't have a CSS problem but something on Chrome is messing things up. I don't have two monitors to try it though, check if this is a crossbrowser issue or just chrome. Also, try to add a minimal example to reproduce the problem (or at leeeeast the related html and css code). Check SO guidelines to ask questions.
– arieljuod
Dec 31 '18 at 13:05
The problem is the same for Firefox and Safari. I would love to build small reproducible sample, if I would know at least the direction of the problem. But I am clueless at this time... This is all looks very very strange
– Tamir
Dec 31 '18 at 13:23
add a comment |
1
Does the problem happen on any browser? You are not being clear on what's the problem (you just say there's a problem and the css "breaks" and posted a link to your site), add a picture, something, and check the guidelines to add an minimal example to reproduce the problem, it's hard to tell inspecting a whole site.
– arieljuod
Dec 31 '18 at 12:55
@arieljuod you are correct. This is Chrome. Here the screenshots imgur.com/a/VPNL3r7 as you can see the only different is maximize on dual monitor. resolution is the same. The same issue also happen if i split it (in any size) between monitors
– Tamir
Dec 31 '18 at 12:59
Did you try with Firefox/Edge/Safari? maybe you don't have a CSS problem but something on Chrome is messing things up. I don't have two monitors to try it though, check if this is a crossbrowser issue or just chrome. Also, try to add a minimal example to reproduce the problem (or at leeeeast the related html and css code). Check SO guidelines to ask questions.
– arieljuod
Dec 31 '18 at 13:05
The problem is the same for Firefox and Safari. I would love to build small reproducible sample, if I would know at least the direction of the problem. But I am clueless at this time... This is all looks very very strange
– Tamir
Dec 31 '18 at 13:23
1
1
Does the problem happen on any browser? You are not being clear on what's the problem (you just say there's a problem and the css "breaks" and posted a link to your site), add a picture, something, and check the guidelines to add an minimal example to reproduce the problem, it's hard to tell inspecting a whole site.
– arieljuod
Dec 31 '18 at 12:55
Does the problem happen on any browser? You are not being clear on what's the problem (you just say there's a problem and the css "breaks" and posted a link to your site), add a picture, something, and check the guidelines to add an minimal example to reproduce the problem, it's hard to tell inspecting a whole site.
– arieljuod
Dec 31 '18 at 12:55
@arieljuod you are correct. This is Chrome. Here the screenshots imgur.com/a/VPNL3r7 as you can see the only different is maximize on dual monitor. resolution is the same. The same issue also happen if i split it (in any size) between monitors
– Tamir
Dec 31 '18 at 12:59
@arieljuod you are correct. This is Chrome. Here the screenshots imgur.com/a/VPNL3r7 as you can see the only different is maximize on dual monitor. resolution is the same. The same issue also happen if i split it (in any size) between monitors
– Tamir
Dec 31 '18 at 12:59
Did you try with Firefox/Edge/Safari? maybe you don't have a CSS problem but something on Chrome is messing things up. I don't have two monitors to try it though, check if this is a crossbrowser issue or just chrome. Also, try to add a minimal example to reproduce the problem (or at leeeeast the related html and css code). Check SO guidelines to ask questions.
– arieljuod
Dec 31 '18 at 13:05
Did you try with Firefox/Edge/Safari? maybe you don't have a CSS problem but something on Chrome is messing things up. I don't have two monitors to try it though, check if this is a crossbrowser issue or just chrome. Also, try to add a minimal example to reproduce the problem (or at leeeeast the related html and css code). Check SO guidelines to ask questions.
– arieljuod
Dec 31 '18 at 13:05
The problem is the same for Firefox and Safari. I would love to build small reproducible sample, if I would know at least the direction of the problem. But I am clueless at this time... This is all looks very very strange
– Tamir
Dec 31 '18 at 13:23
The problem is the same for Firefox and Safari. I would love to build small reproducible sample, if I would know at least the direction of the problem. But I am clueless at this time... This is all looks very very strange
– Tamir
Dec 31 '18 at 13:23
add a comment |
1 Answer
1
active
oldest
votes
The reason was strange behavior of media query max-width and min-width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500. Issue is fixed by increasing max-width to 10K
edited Jan 2 at 3:57
Alireza
1,0771924
answered Jan 1 at 15:33
TamirTamir
2,1051321
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
add a comment |
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%2f53987740%2fstrange-css-behavior-on-dual-display-setup%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
The reason was strange behavior of media query max-width and min-width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500. Issue is fixed by increasing max-width to 10K
edited Jan 2 at 3:57
Alireza
1,0771924
answered Jan 1 at 15:33
TamirTamir
2,1051321
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
add a comment |
The reason was strange behavior of media query max-width and min-width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500. Issue is fixed by increasing max-width to 10K
edited Jan 2 at 3:57
Alireza
1,0771924
answered Jan 1 at 15:33
TamirTamir
2,1051321
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
add a comment |
The reason was strange behavior of media query max-width and min-width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500. Issue is fixed by increasing max-width to 10K
edited Jan 2 at 3:57
Alireza
1,0771924
answered Jan 1 at 15:33
TamirTamir
2,1051321
The reason was strange behavior of media query max-width and min-width. For some reason, it is not being detected correctly with multiple screens on large resolutions >3500. Issue is fixed by increasing max-width to 10K
edited Jan 2 at 3:57
Alireza
1,0771924
answered Jan 1 at 15:33
TamirTamir
2,1051321
edited Jan 2 at 3:57
Alireza
1,0771924
edited Jan 2 at 3:57
Alireza
1,0771924
edited Jan 2 at 3:57
Alireza
1,0771924
1,0771924
answered Jan 1 at 15:33
TamirTamir
2,1051321
answered Jan 1 at 15:33
TamirTamir
2,1051321
answered Jan 1 at 15:33
TamirTamir
2,1051321
2,1051321
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
add a comment |
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
Indeed strange. Seems like css sum the monitors viewport as one screen??
– A. Meshu
Jan 1 at 16:08
add a comment |
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%2f53987740%2fstrange-css-behavior-on-dual-display-setup%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
1
Does the problem happen on any browser? You are not being clear on what's the problem (you just say there's a problem and the css "breaks" and posted a link to your site), add a picture, something, and check the guidelines to add an minimal example to reproduce the problem, it's hard to tell inspecting a whole site.
– arieljuod
Dec 31 '18 at 12:55
@arieljuod you are correct. This is Chrome. Here the screenshots imgur.com/a/VPNL3r7 as you can see the only different is maximize on dual monitor. resolution is the same. The same issue also happen if i split it (in any size) between monitors
– Tamir
Dec 31 '18 at 12:59
Did you try with Firefox/Edge/Safari? maybe you don't have a CSS problem but something on Chrome is messing things up. I don't have two monitors to try it though, check if this is a crossbrowser issue or just chrome. Also, try to add a minimal example to reproduce the problem (or at leeeeast the related html and css code). Check SO guidelines to ask questions.
– arieljuod
Dec 31 '18 at 13:05
The problem is the same for Firefox and Safari. I would love to build small reproducible sample, if I would know at least the direction of the problem. But I am clueless at this time... This is all looks very very strange
– Tamir
Dec 31 '18 at 13:23