I have an issue with CSS z-index on IE7 that I cannot seem to get to the bottom of.
#screen {
display: none;
background-image: url('/images/bg.png');
background-repeat: repeat;
position: fixed;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: 10000;
}
<div id="screen"></div>
I have an overlay that appears on page load called r_box
<div id="r_box">
<div id="message_panel">
...Content in here...
</div>
</div>
#r_box
{
width: 335px;
height: 337px;
background: url("/images/panel.png") no-repeat scroll 0 0 transparent;
position: fixed;
margin-left: -150px;
margin-top: -130px;
left: 50%;
top: 50%;
z-index: 10001;
display: none;
}
#r_box #message_panel {
color: #fff;
z-index: 10001;
bottom: 95px;
}
However, the problem I am having on IE7 only is that on page load the screen div is always on top of r_box. I have tested this on IE8, IE9, FF, Safari and Chrome and it works on all these browsers. The only one where it is an issue is Internet Explorer 7.
Is this likely to be an issue with the screen or r_box DIVs or could this be something else?
This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7.
I decided to remove the problematic behaviour for IE7 only, as i'm a believer that an application does not need to look the same in every browser.
Related
I'm trying to create a header with position: sticky; and position: fixed; of one item inside it and second item without position: fixed;.
Here is the implementation: Codepen
The problem: when I open this Codepen in Chrome, everything is going well, but when I try this code in Firefox there is a strange blinking. You can try by yourself, just scroll down and up.
Just in case, here is the video: Youtube link
Here are the solutions that i've tried:
transform: translateZ(0); on header class is not working for me, because header__item stops moving.
Nested position: sticky; I can use position: sticky on header__item instead of position: fixed; but this solution is not working in Safari browser.
What I want: remove this blinking that you can watch on video.
Firefox version: 80.0.1 64-bit
OS: Ubuntu 18.04.5 LTS
NOTE: this bug may sometimes not reproduce on Windows (i don't know why), but always reproduces on Ubuntu or macOS operating systems. For Firefox 80.0.1 on my PC with Windows, everything works great.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: skyblue;
height: 300vh;
}
.header {
width: 100%;
height: 250px;
background: green;
position: sticky;
top: -80px;
}
.header__item {
height: 150px;
width: 100px;
background: tomato;
position: fixed;
top: 0;
}
.header__second-item {
height: 80px;
width: 100px;
background: purple;
margin-left: auto;
}
<header class="header">
<div class="header__item"></div>
<div class="header__second-item"></div>
</header>
To start, try to replace from position: fixed; elements to position: sticky;
In Firefox, it will be fixed, but child elements with the sticky position are not supported by Safari.
The only way that I see - to detect the browser and replace the position in accordance with the browser.
For example:
.header__item {
position: fixed;
}
#-moz-document url-prefix() {
.header__item {
position: sticky;
}
}
An issue I'm having is strange lines appearing in certain situations. So far I only notice the issue in Webkit browsers. Also, I know my HTML is not done in the most efficient way, but for the purposes of my project, I would like it to remain the same, unless it is the cause of the issue. For my current work, it happens when I highlight text, or click certain things. This is a big issue since highlighting will be done a lot on my page. Please see my example below, note the extra blue areas in the first image are caused by highlighting text (not shown).
As you can see, when the page loads the lines are not present, however — after using the page for a bit, lines like this appear.
I did my best to recreate the problem in JS fiddle, and I was actually able to. If you highlight text, and then click off the text, you should see a line appear.
Here is my JSFiddle example.
Here is a a picture of the issue reproduced in JSFiddle.
HTML:
<div class="container">
<div class="background-image">
<div class="background-color"></div>
</div>
<div class="box">
<div>Highlight all text</div>
<div>Keep going!</div>
<div>Then click off to deselect</div>
</div>
</div>
CSS:
.container {
width: 500px;
height: 500px;
position: relative;
}
.background-image{
background: url('http://i.imgur.com/4pgHkXy.png') repeat;
-webkit-filter: blur(4px);
filter: blur(4px);
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
top: 0;
left: 0;
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
.background-color {
background: #00adee;
opacity: .5;
width: 500px;
height: 500px;
position: aboslute;
top: 0;
left: 0;
}
.box {
background: #fff;
top: 20px;
bottom: 20px;
width: 200px;
height: 300px;
position: absolute;
}
.box div {
margin: 10px;
width: 180px;
height: 50px;
background: #ccc;
}
If I had to make a guess, I would assume it has something to do with the blur effect?
Any idea how to fix this?
Also reproducible on Mac OS X / Latest Chrome.
This is a bug in Webkit that seems to be caused by combining transform:scale with filter:blur. If I remove the transform in the jsfiddle, the glitch is no longer reproducible: https://jsfiddle.net/2fr6tcgz/
If the only reason you're using scale is to hide the blurry edges of the background, you could use background-size: 105% auto; background-position: center center; as a workaround: https://jsfiddle.net/xa23ja88/ (I also fixed the position: aboslute; typo).
Update:
Apparently the above doesn't fix it completely. But this does: https://jsfiddle.net/o0mupqbo/ (switching the nesting of background image and color). Does that work in your situation?
I have a div that when you mouseover has a child div appear to display information. The basic code is as follows:
HTML
<div id="container">
<div id="hidden_div">
<iframe></iframe>
</div>
</div>
CSS
#container {
position: absolute;
height: 20px;
width: 40px;
top: 8px;
left: 30px;
}
#hidden_div {
position: absolute;
background: url(../_images/inside_btn_back.png) repeat;
height: 60px;
width: 350px;
top: 0px;
left: 0px;
margin-top: 20px;
z-index: 50;
display: none;
border: 1px solid #a08f89;
}
#container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div {
display: block;
}
This works in all browsers except IE(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.
it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.
I've found out that my web app is displayed incorrectly
in Opera because of the following bug:
#one {
overflow: hidden;
position: fixed;
height: 100px;
width: 100px;
}
#two {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: #ccc;
}
and html:
<div id="one">
<div id="two"></div>
</div>
instead of occupying the whole view port #two is cut by #one in Opera.
Is there a way to workaround this not affecting other browsers?
This bug is fixed in Opera 11.60, it now behaves exactly like other browsers.
http://jsfiddle.net/KPeYx/
Use the read-only selector to target Opera:
#one:read-only { overflow: auto; }
Why does this not work? It aligns horizontally correct, but not vertically in Opera. In IE it dosent work at all.
http://img834.imageshack.us/img834/340/86238198.png
#footer
{
position: absolute;
top: 905px;
width: 100%;
min-width: 800px;
height: 95px;
margin: 0px;
background-image: url('footerbg.png');
}
#center
{
position: relative;
width: 20%;
height: 70%;
margin: auto;
background-color: red;
}
In Transitional (quirks mode), IE maintains the behavior of its older browsers, so as to not break pre-existing websites that were constructed to look ok in IE 5. So in IE 6 and up, if you do not define a Strict doctype, then it will resort to its old incorrect behavior of not honoring margin:auto.