IE8 allows user to interact with elements obscured by modal window - html

I have a pop-up, (what should be modal), dialogue for messages to the user (#modal). I've added a "background" element (#blinds) to obscure and prevent the user from interacting with other elements on the page. This works great in Firefox, not so much in IE8.
In IE8, I can click around, edit input fields, and submit the form. Is there a way to prevent this with HTML and CSS? Do I need a jQuery solution?
CSS;
#blinds {
background-color: rgba(0, 0, 0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1000;
}
#modal {
position: fixed;
z-index: 1001;
display: none;
}
HTML;
<div id='blinds'></div>
<div id='modal'>
<h1></h1>
<span>X</span>
<p></p>
</div>
Here's a jsFiddle that illustrates my problem with IE8. http://jsfiddle.net/cAkzq/

It's the -ms-filter that is doing it. Use a semi-transparent PNG for your color overlay and it should fix the issue. Vendor tags are experimental and can be non-standard.

Related

Computed Z-Index Does Not Match Element Style

Currently working on an html5 video player. I am running into an issue where once the video element is fullscreen, my custom controls are not clickable due to the video's z-index being set to the max int value; the same as the controls z-index. the default browser media controls are already hidden.
<div id="video-container">
<video frameborder='0' id="page-video" playsinline>
<source src='{{source}}'>
</video>
<div class="container" id="player-controls">
<!-- controls go here -->
</div>
</div>
here's the css for the video container in fullscreen:
#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}
here's the css for the video in fullscreen:
#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}
Here is the css for the controls:
#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647;
cursor: pointer;
}
in the Chrome dev tools, the computed z-index for the video element is changed from auto when its NOT in fullscreen to 2147483647 however clicking on the arrow to expand, it shows the z-index: 1 !important style from my style sheet. This style is not crossed out or anything. I don't really understand why this is happening. These are the only two places in my entire style sheet that use z-index. There are no negative z-indexes anywhere.
The video tag will ignore the z-index you set on it and use the UA styles of "auto" and 2147483647 unless you set position: absolute or position: fixed on it. See HTML5 video ignoring z-index
To hide the native controls, you need to disable them via the "controls" attribute.
<video controls="false">...</video>
In some browsers, there seems to be a bug so that the native controls are still visible in fullscreen mode. You can override the browsers stylesheet and hide them manually:
video::-webkit-media-controls {
display:none !important;
}
To show your custom controlls, simply set the z-index to the max int value.
#player-controls {
z-index: 2147483647;
}
All of this is described in this blog: https://css-tricks.com/custom-controls-in-html5-video-full-screen/

Change brightness of background-image?

I am wondering if it is possible to change the brightness of:
body{
background-image:url();
}
Using HTML/CSS. The reason I would like to change it, is because I just spent a rather long time making the image, but when I put it on website, it is suddenly about twice as bright. I have compared the original file and the file that is input into the website and they are both very much different colours of blue.
Is there any reason for this, and is there a way I can change the brightness?
Thanks.
You can have more layers in the "background" like this:
.someObj{
background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
url(myBgImage.png);
}
This will put 50% white over the original image making it brighter.
Linear-gradient function has to be used, otherwise it doesn't work.
Alternatively use:
.someObj:after{ content:''; background:rgba(255,255,255,.5); ... }
and this is better for code maintainability.
This would be an option, but it's not very practical and wouldn't work in older browsers:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,0.1);
pointer-events: none;
}
Or for even better color control, try hsla() colors:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
Really, it's better to play with the image in a image editor until you get the browser result you want.
There is no way to do this that works in every browser, but if you want, you can do it in webkit browsers (Chrome, Safari, Opera), by using the filter style:
img.lessBright {
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
}
That results in the brightness being reduced to 80% in webkit browsers. I do recommend just saving another version of your image if you want to do this though.
Create a child div for the background image of the same dimensions.
Set the child divs background colour with RGBA, which includes an alpha channel (opacity).
Set the opacity accordingly between 0 and 1. 1 = Opaque, 0=Transparent, 0.5 =Translucent
HTML:
<div id="primary_feature">
<div class="feature"></div>
</div>
CSS:
#primary_feature{
background-image: url("../assets/images/misc/laptop.png");
}
.feature{
background:rgba(0,0,0,0.6);
}
An update to the other answer.
You can also use the Backdrop Filter for a much better effect. It can use any filter, in this case, the brightness filter.
This means your background will not be washed-out with a colour over the top, rather it will affect the background directly for a sharper more natural look while retaining all detail.
The downside, it isn't currently supported in Firefox, unless experimental settings are turned on. But that should change soon and as of writing this, Firefox is only 6.5% of the market.
however, it is fully supported in Chrome
body {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: brightness(120%);
pointer-events: none;
}
I placed a black canvas over the image and changed the brightness:
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0,0,c.width,c.height); //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill();
I had the same problem, but it was with a Gif.
My workaround:
I made a very small black square image in PowerPoint and set its transparency to 50% and saved it as a file called "dimmerswitch.png"
Than I referenced that one first in the code:
body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}
You just do Photoshop to reduce the brightness if there's no other way.

Background color switching to transparent while scrolling in WebKit browsers

I am working on making a fixed navigation web site. I have a navigation bar fixed at the top of the screen using absolute positioning. The CSS looks something like this:
.navbar {
background-color: #1f1f1f
top: 0px;
position: fixed;
width: 100%;
}
And here is my HTML:
<header class="navbar">...</header>
This should be pretty simple, but for some reason I am seeing the background of the navigation flicker between #1f1f1f and what I would describe as simply transparent.
I can get the scroll position to a point where the background color is transparent. At that point, when I inspect the element in the WebKit inspector, the expected styling is there. A background-color of #1f1f1f and basically everything else I mentioned above.
I can toggle the background-color property on and off in the inspector, and that will, more often than not, make the background come back to normal.
Finally, this only seems to be an issue with WebKit based browsers. I can reproduce the issue in Chrome and Opera, but not in Firefox or Internet Explorer. I also don't seem to be able to reproduce this in Safari, at least not in version 7.0 (9537.71) I am also using the Startup Design Framework and the website does feature a video in the background underneath the content <div>, similar to that demo page. Could this be causing some sort of rendering glitch?
More Info:
I removed the background video <div> from the page, and this appeared to solve the issue entirely. This isn't really an ideal solution, though. Are there any known issues with background videos?
You should try a couple different things. First try stacking the item with z-index:
z-index: 1000000; /* max: 2147483647 */
Next, you can try and force hardware acceleration on your menu. The browser will create new rendering layers for your menu which may prevent the flicker.
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
And finally, if your element is larger than the screen (even by one pixel in any direction), it can cause flickering during scrolling on some devices. Try adding the following:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
I recently had the same problem with webkit browsers. All you have to do is add this in your .navbar class in css and see if it works:
backface-visibility:visible;
-webkit-backface-visibility: visible;
-webkit-transform: translateZ(0);
try this:
.navbar {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
background-color: #1f1f1f
}
.navbar {
left: 0;
position: fixed;
top: 0;
width: 100%;
background-color: #1f1f1f;
z-index: 1030;
}
Have you tried to use Firebug to debug the issue? I would suggest you to use Firebug to debug this issue.

Links not clickable in IE

I'm working on this site http://zap3d.com/ and I have a problem: With Internet Explorer (IE) I can't click the two links (Upload and Download) but with Chrome and Firefox I can.
Here is my CSS for Upload button
.upload_button {
position: absolute;
left: 47px;
bottom: 28px;
width: 237px;
height: 41px;
border: none;
background: transparent;
}
Thanks
Some versions of Internet Explorer may not register clicks on elements that have a transparent background, and no content within. In these cases, set your element's opacity to zero:
.upload_button {
opacity: 0;
}
You'll get the same invisible element effect, while maintaining cross-browser compatibility.

ie9 scroll bar and etched border always showing on object

I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.