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; }
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;
}
}
I am placing divs and iframes using position relative & absolute which is working fine on chrome but its not working in IE. I am using Foxit Reader in IE to show the pdf files.
Chrome (Test 1231 23123 is visible)
IE 11 (Test 1231 23123 is behind the iframe)
Below is my html:
<div class="document-previewer-container">
<div class="document-preview">
<div class="document-container">
<iframe id="pdf-container" ng-attr-src="{{vm.selectedDoc.pdfpath`}}"></iframe>
</div>
<div class="doc-overlay">
<p>Test 1231 23123</p>
</div>
</div>
<div class="documents-carousel-wrapper">
<!-- something -->
</div>
</div>
my .less file:
#import '../../styles/light-theme-definitions.less';
div.document-previewer-container {
//height: 400px;
//width: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
//padding: 5px 2px;
> div.document-preview {
height: 88%;
//width: 100%;
position: relative;
.document-container{
height: 100%;
width: 100%;
position: relative;
}
.doc-overlay {
width: 95%;
height: 95%;
position: absolute;
cursor: pointer;
top: 0;
p {
padding: 2px;
}
}
}
> div.documents-carousel-wrapper {
position: relative;
overflow: hidden;
height: 12%;
min-height: 63px;
img {
width: 100%;
height: 100%;
}
}
Update: 1
Working PLUNKER. Please open it with IE or save it on ur local disk and open it with IE
Update: 2
I implemented the logic but still the div is not coming over pdf iframe. Please try clicking anywhere on Plunker.
Actually, I want the doc-overlay to be clickable in real life project. As u'll observe, the click event (using ng-click) is not working over PDF. Please refer the inspect element screenshot for more clarity. IE & Chrome. checkout the blue area too see the difference
You need to either do a hack where you add another iFrame or use library like PDF.js as described here https://stackoverflow.com/a/12977151/8833279
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...
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 have been building a website and mainly testing it in Chrome.
Recently I realised some of the CSS does not apply in Firefox.
I guess it's probably : main { min-height }
This jFiddle reproduces this error, where the main div doesn't have the height it's supposed to. http://jsfiddle.net/msW9m/
HTML :
<div id='main'></div>
<div id="container"></div>
<div id='footer'>
<div id='footerRelative'>Development by <a href='mailto:'>John Doe</a></div>
</div>
CSS :
#main {
min-height: 80%;
height: auto;
border: 1px solid #bbbbbb;
margin: 3% 5% 1%;
padding: 10px 10px;
}
#footer {
position: absolute;
left: 50%;
}
#footerRelative {
position: relative;
left: -50%;
font-size: 80%;
}
/*Probably Irrelevant*/
#container {
margin: 0 auto;
margin-top: -300px;
margin-left: -261px;
position: absolute;
top: 50%;
left: 50%;
width: 523px;
height: 600px;
background-image: url('../images/doctorSymbol.jpg');
background-repeat:no-repeat;
background-position:center;
opacity: 0.125;
overflow: hidden;
z-index: -1;
}
However, in Chrome everything works perfectly and the main div has a min-height of 80% . I was wondering if there is a workaround to this or If I am doing something wrong.
Thank you.
Have you tried making body and html 100%?
In some browsers, the body element doesn't keep 100% height until its content is full.
http://jsfiddle.net/HRKRN/
html, body {
height: 100%;
}
Also a possible solution that worked for me: set the div's display to table-cell.
use CSS3 to solve this issue
http://pastebin.com/Q8727Kvt
Align vertically using CSS 3