Firefox window.getComputedStyle error in Iframe

[Mark]

Let me first start off by saying that this problem is in Firefox only.

I'm trying to use the ImageEditor in a simulated "popup" with an iframe inside of it. See the attached example-usage.jpg for a sample of how I intend to use it.

The typeError specifically occurs when LiteView.js from the ImageEditor resources. See the attached console-log.jpg for the screen capture of the console log indicating the error.

I know that Firefox has issues with getComputedStyle if the iframe is hidden with display:none - mine is not. I know that there are several other quirks with getComputedStyle in Firefox specifically.

If I move the editor out of the "popup" and into a regular page it functions fine.

Is there anyway to force a width with CSS or javascript so that getComputedStyle will return a value. Can I override a javascript function on this page to prevent the typeError? Do you guys know what LiteView.js is trying to do?

Any solutions appreciated.

[Marin Bratanov]

Hi Mark,

The Firefox bug where getComputedStyle returns null is not just about hidden iframes, it is also about content in an iframe that is not rendered yet. The fact that you receive this error indicates that the image editor scripts (meaning, its client-side control initialization) runs while it is not rendered on the screen. It may be in a hidden container inside the frame, or it may be off the viewport and so - again it will not be rendered by the browser.

The particular stack trace points to the responsive features of the RadToolBar that used for the image editor toolbar. It checks how many elements and with what width it has to render (hence, the call to window.getComputedStyle()) in order to determine which ones to hide.

With that being said, I can suggest three approach you can take to resolve this:

1. Use a RadWindow. It will still use an iframe to load the content, but it will only load it the first time it is shown, so it should alleviate the problem.
2. If the issue keeps happening, look into the way the image editor is shown, perhaps it is initially hidden and this can also cause the same issue.
3. Consider setting RenderMode to Classic for the image editor. This will remove the responsive functionality and there may not be other calls to window.getComputedStyle
4. Try the following function override at the end of the </form> where the image editor is, this is the function that is in the stack trace with a small modification I made to avoid looking for the standards ways of getting dimensiosn if they are undefined, so it may cause some appearance issues, but calling .repaint() would probably fix them:

       <script>
           var $T = Telerik.Web.UI;
           $T.RadToolBar.Views.Lite.prototype._getElementWidth = function(element, isOuterWidth) {
               isOuterWidth = typeof isOuterWidth !== 'undefined' ? isOuterWidth : false;
               if (!element || element.style.display == "none") {
                   return 0;
               }
               var $ = $telerik.$;
               if ($telerik.isIE7 || $telerik.isIE8 || !window.getComputedStyle(element)) {
                   if (isOuterWidth) {
                       return $(element).outerWidth(true);
                   }
                   else {
                       return $(element).width();
                   }
               }
               else {
                   var elementWidth = parseFloat(window.getComputedStyle(element).getPropertyValue("width"));
                   if (isOuterWidth) {
                       var elementBorders = parseInt($(element).css("border-left-width"), 10) + parseInt($(element).css("border-right-width"), 10);
                       var elementsPaddings = parseFloat($(element).css("padding-left")) + parseFloat($(element).css("padding-right"));
                       var elementsMargins = parseFloat($(element).css("margin-left")) + parseFloat($(element).css("margin-right"));
                       elementWidth = elementWidth + elementBorders + Math.round(elementsPaddings + elementsMargins);
                   }
                   return elementWidth || $(element).outerWidth(true);
               }
           }
       </script>
   </form>

 

Regards,
Marin Bratanov
Progress Telerik

[Mark]

Marin,

Thank you. This is exactly what I needed. This is also the best and most comprehensive answer I've ever received via a support forum *ever*, *anywhere*.

I chose #3. Works great. If I ever need to use a different render mode, I'll give the script a shot.

Thanks again.

[Marin Bratanov]

Thank you for the kind words, Mark! I'm happy I could help.

--Marin