Edit: Pending a reply from someone with a fix, I'm going to assume this is a bug. It looks like it may be related to https://bugzilla.mozilla.org/show_bug.cgi?id=1794432, though the thread on the tracker is sparse, so it's unclear if Mozilla has determined it is a bug. Contradictory to the thread there, it appears that during my testing any embeds cause this problem, and setting layers.force-enabled does not fix it. I'm leaving the question up with a link to the bug tracker in case someone stumbles across this due to encountering the same issue.
I'm working on a site with a sticky navbar using backdrop-filter to blur the background. This works great, but on pages with an embed (iframe, object, etc.), the filter appears to break in Firefox as scrolling approaches the embed. It doesn't appear to be due to stacking contexts (the navbar remains on top), but I'm at a loss as to what is causing it. Before I file a bug report, I wanted to get input and see if this is a problem with my code, and if anyone here knows the solution. I've included a reproduction below -- viewed in chrome, behavior is as expected; viewed in Firefox, however, the filter breaks on elements surrounding the embed. I've confirmed this happens with a pdf embedded in an object tag as well. I've included the code for a minimum repro below, and there's a link to a JSFiddle here: https://jsfiddle.net/gamo2zy3/1/
.navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
backdrop-filter: grayscale() saturate(180%) brightness(50%) blur(50px);
border-bottom: 1px solid rgb(0, 0, 0);
background-color: rgba(0, 255, 0, 0.1);
}
content-container {
display: block;
width: 500px;
}
div.takespace {
height: 1000px;
}
img {
width: 100%
}
.embedVideo-iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
}
<nav class="navbar">TEST TEXT</nav>
<content-container>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
<img src="https://w.wiki/64tg" />
<iframe src="https://www.youtube.com/embed/B4Kn3djJMCE?rel=0" class="embedVideo-iframe"></iframe>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
</content-container>
I've tested this on Firefox 107.0.1 and Chrome 108.0.5359.73; Firefox added support for backdrop-filter back in version 103 (though I haven't gone back and tested it in that or prior versions). I've tried adding wrappers and z-index settings surrounding the embeds, using a ::before pseudo-element to contain the backdrop-filter, and more. So far nothing I've done has caused the backdrop-filter to behave as expected on firefox. Obviously I can just run code to detect that someone is using Firefox and set the element to be fully opaque, but I'd like to avoid querying useragent if possible (feature detection wouldn't work, since Firefox has the feature). If there's a way to get this working properly in FF I'd like to know.
Before someone marks this as a duplicate, I do not believe this is related to z-index behaviour is different in chrome to firefox. Current firefox behavior mimics chrome in this aspect, fixed positioning is not used, and the navbar still shows up above other elements as expected.
As of Firefox version 108 backdrop filter behavior is working. Nothing in the patch notes suggests that this behavior was directly addressed, but the fact that it changed between versions suggests that it was a bug fixed by some other change (see https://bugzilla.mozilla.org/show_bug.cgi?id=1794432 for the bug it appears to be related to). It's very probable it was a bug.
I use zurb-foundation to maintain the layout of my website. The home page of that website is rendreded perfectly in Opera 12.14 beside some other pages. However, some pages such as this page has extra blank space on the right on Opera only. I tried to inspect element in the blank extra space, it mentioned to the html tag?!! I copied the html source into my editor (netbeans) to see if there some missing ending tags, but I did not find any of them. My website is rtl. What should cause this issue?
I got the cause of this layout problem in Opera. It is due to soundmanager2. In Opera only it generates a div tag just before the closing body tag as follows:
<div id="sm2-container" class="movieContainer sm2_debug" style="position: absolute; width: 6px; height: 6px; top: -9999px; left: 9999px;">
<embed name="sm2movie" id="sm2movie" src="/quran/themed/slate/js/swf/soundmanager2_flash9_debug.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" haspriority="true">
</div>
Since I don't know how to make Soundmanager2 to stop generating this div, I decided to solve it using CSS as the following:
#sm2-container .movieContainer .sm2_debug{
display: none;
}
However, the above CSS solution fixed the layout issue, but it causes the Soundmanager stop working on Opera! Till this point, I regard this is an answer for my question about the layout.
The Final Solurtion:
from this answer on the official SM2 forum. I have to make a div with an id sm2_container and style it as follows then place it anywhere I want in the source:
<div id="sm2-container" style="width:1px; height:1px; visibility: hidden" class="movieContainer sm2_debug" >
</div>
The real useful style is visibilty hidden because it is just an swf square with white background and I want to hide it.
I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;
I need image to stretch as background of page. It doesn't matter if page will not scale well, what ever screen resolution may be, whole image has to be visible on screen. I found some solutions on Google, but it either didn't work in Firefox2 or IE6 or both, and I need those two too.
I hate when people don't upgrade their software, but I'm still see these browsers in google analytics data hitting web page, especially IE6.
Is there good cross browser solution for this?
You could use a good old fashioned img tag, without height and width attributes. In your CSS, position it absolutely with a low z-index, set height and width to "100%".
Put everything else on the page in another div with a higher z-index
Like this:
<style type="text/css">
#stretchy {
postion: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
#everything_else {
position: relative;
top: 0;
left: 0;
z-index: 10;
}
</style>
...
<img src="/images/myimage.jpg" id="stretchy" />
<div id="everything_else">
...
</div>
See http://axoplasm.com/lost.html for an example.
It's not exactly a "background image" (and probably not W3C standards-compliant CSS) but it works.
I don't want to hijack this question, but if you had this code:
background-image: url('images/background.gif');
background-size: 100%;
This repeats the image in all current browsers (IE, FF, GC, SF, OP) which while unsavory works across all the browsers, unlike the z-index depth method (I have a complex foreground).
However if a browser was to suddenly get bg-size CSS3 support, does the CSS3 spec say what should happen? Should it stretch the image or do what it always did and repeat?
It is not possible in CSS1 or CSS2, however it is possible in CSS3: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/
However this is not available to IE6.
An alternative would be using background-repeat, or this site has something that might work (I havent checked if it works): webdesign.about.com/od/css3/f/blfaqbgsize.htm
I know what you mean about users not upgrading browsers, but at what point do you stop coding for IE5, or even IE4?
Good luck,
Matt
A good alternative would be to use a "static image" that fades out to a pattern or solid color. That way you still get your background image (however big you want it) and scalability.
In CSS3, you can use background-size: 100%;
Firefox 3.5 supports some CSS3 properties, but I don't believe they support EVERYTHING yet... (I think).
How can I hide the div without using display:none or JavaScript?
In my country, a lot of Blackberrys come with the CSS support disabled (the mobile companies here are not so good to developers). I have text that says
<div class="BBwarn">
please activate your css support and a link
</div>
I want to hide that once the user activates CSS support, but i can't use display:none; because it is only supported in BB firmware 4.6. It is a public site and I can't make all my visitors upgrade.
Does anybody knows a solution to this? I hope the question is easier to understand now.
Update:
Thank you all for the answers but I can't use
position:absolute
overflow
because they are available from Blackberry firmware 4.6 and up
things to try:
use the z-index to put it behind some other element
move it off the screen by absolute positioning
visbility: hidden
make the content "invisible" by setting background to foreground color (works only for text)
opacity: 0
but the real question is: why?
This is a common way:
margin-left: -9999;
How about:
visibility: hidden;
That should hide the DIV, (note how it will still be rendered but be invisible, that means it will take space in the document as if it was visible, but be invisible (unlike display:none; where the div will not be rendered)).
<div style="height:0;width:0;overflow:hidden;">
<!-- content here -->
</div>
Incidentally, this is what I do to preload images, which is nice because it doesn't use javascript.
Visibility:hidden won't do the same thing because some browsers are smart and won't make the request unless it thinks its actually visible.
Why not try the simple:
position: absolute;
left: -1000px;
I can't see why it wouldn't work.
I'm not sure of the percentages you're talking about that are using < 4.6, but if it's that important to you, then I can see a rationale for accepting that you can't please all the people all the time, and an acceptable cascading solution to this should be achievable. Probably with a link to explain the benefits of upgrading and enabling css.
height: 0;
overflow: hidden;
visibility: hidden;
color: #fff;
background: #fff;
BTW - you'd better make sure that you're css is good if you're telling someone to turn it on... :-)
What makes you think display: none is not supported before version 4.6? Did you test that, or are you going by their documentation?
I'm not a mobile developer either, so I'm just going by what I gleaned from the documentation.
The BlackBerry Browser 4.6 CSS Reference indeed mentions "Availability: BlackBerry® Device Software version 4.6 or later" for the display property, but their BlackBerry Browser 4.3 Content Developer Guide indicates that 4.3 already supported a very limited version of the display property, including display: none. Versions before 4.3 don't support the display property (again, going by the BlackBerry Browser developer documentation).
Can you assume your users do at least have firmware version 4.3, or is that just as unacceptable as assuming they have 4.6?
Have you tried simply setting the width and height to zero? I'm not familiar with the BlackBerry (Browser), but I'm sceptically assuming its CSS support is less than perfect, certainly on the older versions. I wouldn't be surprised if this worked:
.BBwarn {
display: none; /* for 4.6 and up */
width: 0px; /* for 4.3 */
height: 0px;
}
But then width and height are only supported on all elements starting from version 4.3. Before that they could only be applied to <button> and <img> tags and some <input> types (according to the documentation).
So perhaps the safest way to really make it work on all BlackBerry firmware versions is to use an image for the warning, and use CSS to set its width and height to zero.
If an image is not an option (due to lozalization issues or so, perhaps), an ugly hack might be to specify an empty/illegal image source and put the warning text in the alt attribute. I don't know if setting its width and height to zero would still hide that alt text then.
visibility: hidden; will work, but the space taken up by that particular div will still appear. If you are going to use the negative left-margin method, remember that you will need to set the object's position to absolute.
How about this:
clip: rect(0,0,0,0);
Note: Please note the clip property does not work if "overflow:visible" is used.
In your case:
<div class="BBwarn">
please activate your css support and a link
</div>
just add this css:
.BBwarn{
position: absolute;
clip: rect(0,0,0,0);
}
You could position it absolutely off the screen.
But I, also, am not a mobile developer.
I assume You don't want to use JavaScript because the Blackberrys don't support it.
What about if you did the opposite and displayed the block of code with JavaScript, rather than tried to hide it?
<script type="text/javascript"><!--
document.open();
document.writeln('<div class="BBwarn">');
document.writeln('please activate your css support and a link');
document.writeln('</div>');
document.close();
//--></script>
This is a bit of a hack, but would not display the text with disabled JavaScript...
You can do something like wise:
.class{
opacity:0; overflow:hidden; visibility: hidden; height:0;
}
for being more precise you can add :
color:transparent; background-color:transparent;
What exactly is wrong with (the earlier mentioned)
width: 0
height:0
visibility: hidden
width: 0 height:0 visibility: hidden
...Does not always work with firmware 2.2 and older. Sometimes you can get an element to be hidden, but it will reappear with certain keystrokes (like underscore, for instance).
Or you could use Please enable Javascript
And use an image that reads "Enable CSS" and style it using "display:none".
So that whenever the corresponding feature is enabled these warnings wont show.
Alternately, I presume you are using some server side code? You could try detecting for the most common known platforms that support specific versions of css/javascript and deliver content accordingly. You might not even have to write it all yourself.
I had a similar problem when I was trying to customize a select box using javascript in BlackBerry Curve 8530 (OS 5.0). But, the menu created couldn't be hidden because the css following properties still don't work:
display
overflow
position: absolute
visibility
z-index
And destroying and recreating the HTML elements didn't work either, so I got here and could solve my problem.
I know my answer isn't exactly about the question raised here, but once I got here when had problems, I think I'm not the only one with it happened and is going to.
Anyway, even if those css properties worked, what I needed was some code that could work on the most of the BB models.
My solution was made using all the answers found here. It was simple. I made two classes:
.element
{
width: 100px;
height: 100px;
font-size: 12px;
color: black;
background-color: transparent;
border: 1px solid black;
}
.element_hidden
{
width: 0px;
height: 0px;
font-size: 0px;
color: white;
background-color: white;
border: none;
}
Yes. I've made two of them for each kind of element I had in my page.
Initially, all classes are set to class="element_hidden", so when the mouse is over the select box menu, all the classes are changed to class="element" and they are shown and hidden as if they were made invisible/visible.
I hope this can be useful to someone! ;D
We can use the transform property to scale the element along the x and y axis.
. BBwarn{
transform : scale(0,0);
}
I used font size to obtain this without using display none
font-size: 0px;
As you said in question that you need solution for Blackberry version below 4.6 and there are very few CSS properties supported for Blackberry version below 4.6 so we can use some sort of hack for this purpose. Try and set the text color to whatever the background is or set font-size to 0. It's a hack, but it makes it invisible. Run the following snippet and let me know if its works for you.
.alert1 {
color: #fff; //3.8 or later
}
.alert2 {
font-size: 0; //3.8 or later
}
<b>Alert1</b>
<div class="alert1">
please activate your css support and a link
</div>
<b>Alert2</b>
<div class="alert2">
please activate your css support and a link
</div>