All geek questions in one place

: target css pseudoclass does not work properly in Firefox when it sets content inside iframe

I created two simple html pages, one of which contains an iframe, and the second into this iframe of the first page. The first page is at http://quatorze.atspace.co.uk/Webdev/shared/ffbug1.html

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>:target bug in firefox</title> <style type=text/css> iframe:target { display: none; } ol { max-width: 480px; font-family: sans-serif; } li { margin: 8px; } span { color: red; } </style> </head> <body> <div id="div0"> <p><a href="#if">HIDE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#div0">SHOW</a></p> <iframe id="if" src="ffbug_files/ffbug3.html" width="400" height="200"></iframe> <ol>In Firefox click links on this page in following order: <li>Click "DIV 1". First div gets targeted and its background turns silver;</li> <li>Click "HIDE". Iframe gets targeted and its "display" property is set to "none";</li> <li>Click "SHOW". Iframe is no longer targeted and its "display" property is reset to "inline";</li> <li>Now click "DIV 2". Second div gets targeted and its background turns silver. First div is no longer targeted and its "background-color" must be reset to "skyblue" but <span>it remains silver</span>;</li> <li>Click "DIV 1". First div gets targeted, its background <span>was already silver</span>, second div is no longer targeted and its "background-color" is reset to "skyblue".</li> <li>Click "DIV 2". Second div gets targeted, its background turns silver, first div is no longer targeted, its "background-color" is reset to "skyblue".</li> <li>Click "HIDE". Iframe gets targeted and its "display" property is set to "none";</li> <li>Click "SHOW". Iframe is no longer targeted and its "display" property is reset to "inline";</li> <li>Now click "DIV 1". First div gets targeted, its background turns silver. Second div is no longer targeted and its "background-color" must be reset to "skyblue", but <span>it remains silver</span>. </ol> </div> </body> </html>

The second page loaded in the iframe is at http://quatorze.atspace.co.uk/Webdev/shared/ffbug_files/ffbug3.html

 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>:target bug in firefox</title> <style type=text/css> div { width: 140px; height: 140px; border: 2px solid; margin: 6px; padding: 10px; background-color: skyblue; float: left; } div:target { background-color: silver; } </style> </head> <body> <div id="div1"><a href="#div1">DIV 1</a></div> <div id="div2"><a href="#div2">DIV 2</a></div> </body> </html>

As you can see, on the first page there are two links named "SHOW" and "HIDE".

"SHOW" refers to the containing div, and "HIDE" refers to the iframe.

The iframe property "display" is set to "none" when it becomes the target.

The second page loaded in the iframe contains two divs. Each div has a link inside it that references that div.

The CSS rule set on each div forces it to change its background color when it targets from skyblue to silver.

In Firefox, try clicking on the links on the first page in the following order:

  • Press "DIV 1". The first div becomes the target, and its background silver turns;

  • Click HIDE. Iframe gets the target value and its display property is set to none;

  • Click on SHOW. Iframe is no longer targeted, and its "display" property reset to "inline";

  • Now press "DIV 2". The second div takes aim, and its background turns Silver. The first div is no longer targeted, and its "background color" should be reset to "skyblue" (which actually happens in Chrome), but it remains silver.

+6
source share
2 answers

This may not be the answer you are looking for, but it is practical.

If you are trying to do cross-browser compatibility for your project, then you should look for this subset of functionality that every browser does well and use it.

Since you seem to have applied styles correctly, if you get the right functionality in one browser and not in another, you just need to use your energy to find a common approach that works in both.

Even if Firefox fixes this error for you, you will still have visitors who will work in it for a long time.

-1
source

You should try jquery, I believe that everything will be fine. I am running in chrome in code, no problem. It appears that you said that the problem is in firefox, you can click on it, showing div1, div2 reset in blue. You are trying, I hope you can help.

-1
source

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

More articles:


All Articles