All geek questions in one place

How can I click on a position: fixed; height: 100%; width: 100% overlay in IE8?

I have a mistake that I am trying to narrow down, and this proves that it is a doozie. I am doing modal overlay and in IE8 for some reason I can click through, the focus inputs and select the text under it.

in IE9, FF, Chrome, everything works as expected. unfortunately, the small test file that I hit together (shown below) works fine in IE8. Has anyone encountered this error before? hoping to save time. thanks!

<!DOCTYPE html> <html> <head> <style> div { background: pink; position: fixed; height: 100%; width: 100%; top: 0; left: 0; opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } </style> </head> <body> <input type="text" /> <div></div> </body> </html>
+3
source share
3 answers

figured this out, I used rgba () instead of opacity because I only need a background to have transparency.

for IE, it generated a gradient filter using the -ms filter, which caused the problem. finished using

 background: url(/images/EBEBEBB3.png); background: rgba(255,255,255,.7);
0
source

The problem is that IE allows clicks to leak when the background div is transparent. For me, this works everywhere:

Just use base64 encoding of transparent GIF 1x1 pixels as background, this stops all clicks / tags (also checked on IE9 and IE8). This is also pure CSS, no additional images required.

 background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+5
source

The main reason for this problem is that IE does not believe that translucent backgrounds are valid click targets, and therefore clicks are passed under the element below.

For IE, you must have a solid background color or background image in order to have clicks with an element capture. As you have found, the filters will not work.

A common goal is to use a transparent 1x1 GIF as a background image for IE. Then the element will capture clicks accordingly.

+2
source

Source: https://habr.com/ru/post/918210/

More articles:


All Articles