0

I have tried to follow what is in this tutorial, but it just is working for Chrome, internet explorer doesn't create the ::after element after the iframe. Any other ideas of how to achieve the same result ?

EDIT: I am using the IE 11.

The iframe is placed inside a tooltip generated by the qtip2. The HTML generated is something like that:

<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10" 
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite" 
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;" 
aria-atomic="false" tracking="false" data-qtip-id="10">
    <div class="qtip-tip" 
    style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
        <canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
        </canvas>
    </div>
    <div class="qtip-titlebar">
        <div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
    </div>
    <div class="qtip-content" id="qtip-10-content" aria-atomic="true">
        <div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
            URL: http://portal/sites/test2/Pages/default.aspx
        </div>
        <iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
         style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
         </iframe>
         <div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
         </div>

     </div>
 </div>

And the CSS rules are inherited from the application in general, hard to put in here everything. But to resize the iframe to make it look like a thumbnail I added something like that:

.qtip-content:after 
{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.qtip-content::after 
{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.qtip-customized {

}

.iframeLinkUrl{
    transform: scale(0.32, 0.31) translate(-73%,-99%);
}

As you can see, I also used a div to put in front of the iframe, but even like that it didn't work for IE:

 <div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
 </div>
Tito
  • 722
  • 4
  • 26
  • 55
  • 2
    What version of IE? – epascarello Nov 09 '16 at 16:39
  • Can we see any samples or source code? That might help figure out why it's not creating. – Nol Nov 09 '16 at 16:40
  • Note, that the most of the currently used browsers don't need the vendor prefix for `transform` (including IE>9). The "tutorial" you've linked, doesn't seem to provide pure `transform` rule at all. – Teemu Nov 09 '16 at 16:44
  • The tutorial incorrectly uses `:after` not `::after`: http://stackoverflow.com/a/8980663/2181514 – freedomn-m Nov 09 '16 at 16:48
  • In modern browsers setting `pointer-events: none` for the iframe will replace all that CSS in the tutorial. Keyboard navigation still works, though. – Teemu Nov 09 '16 at 16:56

0 Answers0