I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
I'm attempting to use the CSS clip and clip-path properties to display a floating pager nav for a single-page website layout. I'm trying to get the nav to change colors based on whether it's on a dark or light background. You can see the intended result in Firefox at http://dannymcgee.net/redesign. I've also duplicated the nav and containers with cleaner, lighter-weight code at http://dannymcgee.net/dev/clipnav-prototype/ for troubleshooting purposes.
This is the way the markup is structured for each section with a different background color:
<section>
<div class="clipper">
<ul class="nav">
...
</ul>
</div>
<article class="content">
...
</article>
</section>
This entire section is repeated every time the background changes. Each section is relatively positioned. The .clipper is styled like so:
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
clip: rect(auto,auto,auto,auto);
clip-path: inset(0 0 0 0);
The .nav inside the clipper is position: fixed from the top of the page and has backface-visibility: hidden.
The effect works basically exactly as I'd like it to in Firefox, but is buggy in Chrome and IE. In Chrome, the background images act strangely, and the nav isn't interactable past the first section. In IE, the nav simply doesn't appear at all past the first section. I've seen this exact same setup working correctly in Chrome and IE here (actually, I found the link on an old StackOverflow thread that I can't comment on), so I know it's possible, I just can't figure out what they're doing differently. I'd be pretty satisfied using some sort of shim Javascript or jQuery solution if I could find one, but this seems like a pretty unusual case scenario and I'm not even sure where to begin to look.
After some extensive troubleshooting, I've solved the problem. Basically, clip and/or clip-path are really fragile in Chrome and IE. Most of the problems were being caused by having positioned elements inside the fixed nav. Once I removed all position declarations for everything inside the .nav, it functioned mostly as intended in Chrome. IE is probably a lost cause, so I'll have to design a fallback for it.
Caveat: applying CSS3 transforms to anything inside the .clipper seems to break the background-attachment: fixed for the third section in Chrome. No idea why, but it'll be easy enough to just disable those effects for Chrome.
What worked for me is creating a class for the sole purpose of cliping the section (in this case the header).
.clip-path-header {
clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
}
Then, using jquery and waypoints removed the clip-path class, bypassing the problem:
$(document).ready(function() {
$('.js--first-section').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
$('header').removeClass('clip-path-header');
} else {
$('nav').removeClass('sticky');
$('header').addClass('clip-path-header');
}
},{
offset:'60px;' /* or your preferred offset */
});
});
You could also remove bg image by creating another class to set bg image opacity to 0 and adding it to your header on scroll for a smoother feel.
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!
This is an issue not easy to explain, basically, when you open my site (http://www.securebitcr.com/test/sbcr/) and resize, you can see an "extra" space at the end of the site, is there a way to limit that?
It is like, if I have a div(height:800) but the window itself is sized to 400px, I am able to see the rest of the site, but all the other objects that I'm attaching to the bottom (like the footer) ... you can see all the code at once in my file.
http://www.securebitcr.com/test/sbcr/
Any help is greatly appreciated.
Thanks,
Marco
I didn't test this in any other browser, so you may have to serve these changes to just IE7, by using a stylesheet just for IE7, via a conditional comment.
Set these styles:
html, body { margin: 0; padding: 0; height: 100% }
body { position: relative }
I recommend trying those changes, and seeing if they're fine to apply for all browsers - that might well be the case.
It looks like #content_frame is causing the scrollbar to appear even though you're using overflow: hidden on the parents. I'm guessing position: relative has something to with it, try removing that. It works fine in IE8 and Firefox.
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>