CSS filter disabled fixed position
I've got a page that works fine until the filters get activated. There's a footer at the end of the body element which is set up to be fixed at the bottom of the viewport. Now I needed to create another footer element with the same positioning. It contains buttons for a form, and in order for the submit buttons to work, they have to be within the form element.
When a modal opens on the page (here's the code that does that), the background is dimmed and filtered. But as soon as that filter is in effect, the second footer is no longer at the bottom of the viewport but rather at the bottom of the other page content, which can be anywhere.
Here's the sample that shows the issue. Just comment out the filter style to see how it should look like. The diverse colours and heights are only set for illustration purposes. I my app, all footers look the same. In fact I'm not using footer2 anymore but need footer1 to be where footer2 is, always.
body>* {
filter: blur(1px);
}
main {
border: 2px solid #64e315;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
#footer1 {
background: #dce2f8;
}
#footer2 {
border: 2px solid #e38e15;
text-align: center;
}<main>
<p>
Main content
</p>
<p style="height: 150px;">
<!-- Placeholder for fixed footer 1 -->
</p>
<footer id="footer1">
Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
</footer>
</main>
<footer id="footer2">
Footer 2
</footer>From what I've read now I have the impression that the CSS spec requires this to be. I just cannot understand why. Why should a filter affect any layout? And is there a way I can prevent this? Remember, the buttons need to be in the form or they won't work.
html css layout
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
|
show 1 more comment
I've got a page that works fine until the filters get activated. There's a footer at the end of the body element which is set up to be fixed at the bottom of the viewport. Now I needed to create another footer element with the same positioning. It contains buttons for a form, and in order for the submit buttons to work, they have to be within the form element.
When a modal opens on the page (here's the code that does that), the background is dimmed and filtered. But as soon as that filter is in effect, the second footer is no longer at the bottom of the viewport but rather at the bottom of the other page content, which can be anywhere.
Here's the sample that shows the issue. Just comment out the filter style to see how it should look like. The diverse colours and heights are only set for illustration purposes. I my app, all footers look the same. In fact I'm not using footer2 anymore but need footer1 to be where footer2 is, always.
body>* {
filter: blur(1px);
}
main {
border: 2px solid #64e315;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
#footer1 {
background: #dce2f8;
}
#footer2 {
border: 2px solid #e38e15;
text-align: center;
}<main>
<p>
Main content
</p>
<p style="height: 150px;">
<!-- Placeholder for fixed footer 1 -->
</p>
<footer id="footer1">
Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
</footer>
</main>
<footer id="footer2">
Footer 2
</footer>From what I've read now I have the impression that the CSS spec requires this to be. I just cannot understand why. Why should a filter affect any layout? And is there a way I can prevent this? Remember, the buttons need to be in the form or they won't work.
html css layout
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
1
applying filter to everything isn't a good idea btw .. one filter should be enough
– Temani Afif
Nov 25 '18 at 19:35
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here.
– ygoe
Nov 25 '18 at 19:39
what is the framework? do you have any upper container than the main, between the body and the main?
– Temani Afif
Nov 25 '18 at 19:45
Well, I wrote it myself but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean.
– ygoe
Nov 25 '18 at 19:51
I guess this is a good example to show how it works : ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess
– Temani Afif
Nov 25 '18 at 19:58
|
show 1 more comment
I've got a page that works fine until the filters get activated. There's a footer at the end of the body element which is set up to be fixed at the bottom of the viewport. Now I needed to create another footer element with the same positioning. It contains buttons for a form, and in order for the submit buttons to work, they have to be within the form element.
When a modal opens on the page (here's the code that does that), the background is dimmed and filtered. But as soon as that filter is in effect, the second footer is no longer at the bottom of the viewport but rather at the bottom of the other page content, which can be anywhere.
Here's the sample that shows the issue. Just comment out the filter style to see how it should look like. The diverse colours and heights are only set for illustration purposes. I my app, all footers look the same. In fact I'm not using footer2 anymore but need footer1 to be where footer2 is, always.
body>* {
filter: blur(1px);
}
main {
border: 2px solid #64e315;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
#footer1 {
background: #dce2f8;
}
#footer2 {
border: 2px solid #e38e15;
text-align: center;
}<main>
<p>
Main content
</p>
<p style="height: 150px;">
<!-- Placeholder for fixed footer 1 -->
</p>
<footer id="footer1">
Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
</footer>
</main>
<footer id="footer2">
Footer 2
</footer>From what I've read now I have the impression that the CSS spec requires this to be. I just cannot understand why. Why should a filter affect any layout? And is there a way I can prevent this? Remember, the buttons need to be in the form or they won't work.
html css layout
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
I've got a page that works fine until the filters get activated. There's a footer at the end of the body element which is set up to be fixed at the bottom of the viewport. Now I needed to create another footer element with the same positioning. It contains buttons for a form, and in order for the submit buttons to work, they have to be within the form element.
When a modal opens on the page (here's the code that does that), the background is dimmed and filtered. But as soon as that filter is in effect, the second footer is no longer at the bottom of the viewport but rather at the bottom of the other page content, which can be anywhere.
Here's the sample that shows the issue. Just comment out the filter style to see how it should look like. The diverse colours and heights are only set for illustration purposes. I my app, all footers look the same. In fact I'm not using footer2 anymore but need footer1 to be where footer2 is, always.
body>* {
filter: blur(1px);
}
main {
border: 2px solid #64e315;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
#footer1 {
background: #dce2f8;
}
#footer2 {
border: 2px solid #e38e15;
text-align: center;
}<main>
<p>
Main content
</p>
<p style="height: 150px;">
<!-- Placeholder for fixed footer 1 -->
</p>
<footer id="footer1">
Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
</footer>
</main>
<footer id="footer2">
Footer 2
</footer>From what I've read now I have the impression that the CSS spec requires this to be. I just cannot understand why. Why should a filter affect any layout? And is there a way I can prevent this? Remember, the buttons need to be in the form or they won't work.
body>* {
filter: blur(1px);
}
main {
border: 2px solid #64e315;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
#footer1 {
background: #dce2f8;
}
#footer2 {
border: 2px solid #e38e15;
text-align: center;
}<main>
<p>
Main content
</p>
<p style="height: 150px;">
<!-- Placeholder for fixed footer 1 -->
</p>
<footer id="footer1">
Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
</footer>
</main>
<footer id="footer2">
Footer 2
</footer>body>* {
filter: blur(1px);
}
main {
border: 2px solid #64e315;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
}
#footer1 {
background: #dce2f8;
}
#footer2 {
border: 2px solid #e38e15;
text-align: center;
}<main>
<p>
Main content
</p>
<p style="height: 150px;">
<!-- Placeholder for fixed footer 1 -->
</p>
<footer id="footer1">
Footer 1<br>Footer 1<br> Footer 1<br>Footer 1
</footer>
</main>
<footer id="footer2">
Footer 2
</footer>html css layout
html css layout
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
edited Nov 25 '18 at 20:08
ygoe
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
asked Nov 25 '18 at 19:29
ygoeygoe
6,1291567129
6,1291567129
1
applying filter to everything isn't a good idea btw .. one filter should be enough
– Temani Afif
Nov 25 '18 at 19:35
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here.
– ygoe
Nov 25 '18 at 19:39
what is the framework? do you have any upper container than the main, between the body and the main?
– Temani Afif
Nov 25 '18 at 19:45
Well, I wrote it myself but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean.
– ygoe
Nov 25 '18 at 19:51
I guess this is a good example to show how it works : ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess
– Temani Afif
Nov 25 '18 at 19:58
|
show 1 more comment
1
applying filter to everything isn't a good idea btw .. one filter should be enough
– Temani Afif
Nov 25 '18 at 19:35
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here.
– ygoe
Nov 25 '18 at 19:39
what is the framework? do you have any upper container than the main, between the body and the main?
– Temani Afif
Nov 25 '18 at 19:45
Well, I wrote it myself but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean.
– ygoe
Nov 25 '18 at 19:51
I guess this is a good example to show how it works : ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess
– Temani Afif
Nov 25 '18 at 19:58
1
1
applying filter to everything isn't a good idea btw .. one filter should be enough
– Temani Afif
Nov 25 '18 at 19:35
applying filter to everything isn't a good idea btw .. one filter should be enough
– Temani Afif
Nov 25 '18 at 19:35
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here.
– ygoe
Nov 25 '18 at 19:39
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here.
– ygoe
Nov 25 '18 at 19:39
what is the framework? do you have any upper container than the main, between the body and the main?
– Temani Afif
Nov 25 '18 at 19:45
what is the framework? do you have any upper container than the main, between the body and the main?
– Temani Afif
Nov 25 '18 at 19:45
Well, I wrote it myself but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean.
– ygoe
Nov 25 '18 at 19:51
Well, I wrote it myself but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean.
– ygoe
Nov 25 '18 at 19:51
I guess this is a good example to show how it works : ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess
– Temani Afif
Nov 25 '18 at 19:58
I guess this is a good example to show how it works : ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess
– Temani Afif
Nov 25 '18 at 19:58
|
show 1 more comment
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%2f53471086%2fcss-filter-disabled-fixed-position%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%2f53471086%2fcss-filter-disabled-fixed-position%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
applying filter to everything isn't a good idea btw .. one filter should be enough
– Temani Afif
Nov 25 '18 at 19:35
The filter is applied by framework code. When the modal (not shown here) opens, all background (except the modal element which is excluded) needs to be blurry. There is no single element to apply the filter on. Anyway, it shouldn't make a difference here.
– ygoe
Nov 25 '18 at 19:39
what is the framework? do you have any upper container than the main, between the body and the main?
– Temani Afif
Nov 25 '18 at 19:45
Well, I wrote it myself but it's not tied to this web page. I cannot assume any intermediate container, this should work with any page structure. And additional markup would just look unclean.
– ygoe
Nov 25 '18 at 19:51
I guess this is a good example to show how it works : ygoe.github.io/Frontfire/modal.html ... you can add it to the question I guess
– Temani Afif
Nov 25 '18 at 19:58