I have the following issue with Safari: http://cl.ly/ZlJ8
LiveDemo: http://drpdev.de/labs/example.html
full source code: http://jsfiddle.net/uqsghon7/
<div class="row">
<div class="rowcontainer">
<div class="side">
...
</div>
</div>
</div>
... (multiple times with different contents in .side)
and style:
.side {
height: auto;
padding-left: 50px;
margin: auto;
position: fixed;
top: 50%; left: 0; bottom: 0;
width: 350px;
...
}
.row {
...
position: relative;
overflow: hidden;
}
.rowcontainer {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
clip: rect(0, auto, auto, 0);
overflow:hidden;
}
It works perfectly in Chrome and Firefox.
Before I tried to achieve it only with position fixed inside the (relative positioned) div (without second container) and overflow hidden and it worked in all browser but not Firefox, so I had to do this workaround with css-clip... It actually works in Safari as well but it seems like Safari's render engine is not refreshing the view when scrolling...
Any ideas?
Very interesting.
I think I found the answer, but it involves a webkit-only hack. That bugs me a little but hopefully this still fits the bill.
Digging around for clipping/rendering issues, I stumbled across an SO question regarding background-position and fixed-position elements—the answer mentioned -webkit-mask-image as a webkit-only alternative to clip: auto.
It works for you, too—just adding the following CSS makes Safari happy:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.rowcontainer {
clip: auto;
-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)
}
}
Here is a fiddle and a working model.
I confess I don't really understand why it works. But it works in Chrome and Firefox, too.
IE9, however, is really not happy with this. IE11 shows the content of the divs but skips most of their background. Worth considering...
Related
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?
So, I've got this rather large overlay that I need to tile, and everything works as expected until I get to Internet Explorer. On Internet Explorer when it "tiles" horizontally, I get these odd lines that aren't a part of the original document.
The offending HTML and CSS:
<html>
<head>
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
width: 100%;
height: 100%;
position: relative;
background-color: #CCCCEF;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://dl.dropboxusercontent.com/u/177486/grit.tiny.png');
background-position: -900px 0%;
z-index: 1;
}
</head>
<body>
<div class="overlay"></div>
</body>
<html>
Here's an image showing what it does:
Example on JSFiddle
Definitely an IE bug. Semi-answer found here. Basically, images with alpha and certain aspect ratios on Windows 8+ (IE 10/11) will reproduce this. Switching to a 1:1 aspect ratio image (in this case) will avoid tiling bug. Not a great solution since you have to modify your image, but if you can modify image dimensions- it works.
I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.
My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.
Why?
What are my options for workarounds?
EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.
HTML:
<div class="bg">
<div class="a">
<div class="aa">titlebar</div>
<div class="b">
<!-- many lines of content here -->
</div>
</div>
</div>
CSS:
body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */
.bg {
background: #333;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}
.a {
background: #eee; border: 3px solid #000;
height: 80%; max-height: 800px; min-height: 200px;
margin: 0 auto;
position: relative;
width: 80%; min-width: 200px; max-width: 800px;
}
.aa {
background: lightblue;
height: 28px; line-height: 28px;
text-align: center;
}
.b {
background: coral;
overflow: auto;
padding: 20px;
position: absolute;
top: 30px; right: 0; bottom: 0; left: 0;
}
Here's a demo of the problem: http://jsbin.com/urikoj/1/edit
I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.
It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.
In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).
*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.
I once fixed this issue by:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
Make sure your page is declared as HTML5
<!DOCTYPE html>
The problem with the vertical aling in IE<9 should be solved with this:
.bg {
text-align: center;
}
.a {
text-align: left;
}
But I don't know what's going wrong with the absolute position
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.
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; }