RadEditor compatibility issues with Safari v14 - v15

[Kwango]

Hi.

We have an issue with the RadEditor causing an entire Ajax update panel to fail on an async postback.

This only happens if the RadEditor has been generated dynamically, if it is put in at design time for example on a user control.   However our existing code base is heavily reliant on the editor being created dynamically.

We have tested this on most browsers and only seems to be an issue on Safari V14 and Safari V15.  We have also tested using various versions of the Telerik controls including the Jan 2022 release.  IMO It’s likely that the problem has come about because of a change to Safari, rather than a change to the RadEditor.

I have recreated this using a standard webforms app template in VB in visual studio 2019 , targeting framework 4.7

This can be created using a very simple form.

 <form id="form1" runat="server">
               <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <div>
                   <asp:Label ID="Label2" runat="server" Text="Outside The Panel"></asp:Label>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    <asp:Label ID="Label1" runat="server" Text="Inside the Panel"></asp:Label>


                </ContentTemplate>
                <Triggers>

                    <asp:AsyncPostBackTrigger ControlID="Button2"/>
                </Triggers>
            </asp:UpdatePanel>

            <asp:Button ID="Button1" runat="server" Text="Sync"/>
            <asp:Button ID="Button2" runat="server" Text="ASync"/>
        </div>

    </form>

 

with a very simple code behind and running in a version of Safari 14 +

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim radEditor = New Telerik.Web.UI.RadEditor

        radEditor.ID = "Editor2"
        RadEditor.Enabled = True

        PlaceHolder1.Controls.Add(RadEditor)

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Label1.Text = "Updated Label 1 (sync)"
        Label2.Text = "Updated label 2 (sync)"
    End Sub

    Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        Label1.Text = "Updated Label 1 (async)"
        Label2.Text = "Updated label 2 (async)"
    End Sub                                                               

[Rumen]

Hi Kwango,

Can you please set UseSubmitBehavior="false" to the asp:Buttons which should solve the issue?

The problem is discussed in the following KB article on the matter: RadEditor Content Not Saved After Ajax Update in IE9, Firefox, Google Chrome and Safari.

 

Best Regards,
Rumen
Progress Telerik

[Matthew]

Hi Rumen, this doesn't seem to solve the issue.

The issue only occurs on Safari from v14 onwards and is related to the entire panel being displayed.  Not just the contents of the Rad Editor.  Literally every other control on the panel will not display, whether it's Telerik or ASP.

 

 

 

[Rumen]

Hi Matthew,

After detailed investigation we came to conclusion that this is  Safari regression which prevents the iframe content area scripts to load. The only workaround that we can provide until the issue gets resolved by the Safari vendor is to set the RadEditor's ContentAreaMode property to Div.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim radEditor = New Telerik.Web.UI.RadEditor
        radEditor.ID = "Editor2"
        radEditor.ContentAreaMode = EditorContentAreaMode.Div
        ...

This will resolve the problem!

[Emirates Real Estate Solutions]

Hi Rumen,

Do we have any further updates/fixes related to this safari issue?

[Rumen]

The article provided in my initial reply is still valid - https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/editor-content-not-saved-after-ajax-update-in-ie9-firefox-google-chrome-and-safari. 

Please try the solutions in it and if you still experience any issues share your aspx and codebehind files and steps to reproduce the issue.

[Emirates Real Estate Solutions]

*** Telerik Admin Update: The provided sample project archive was deleted. ***

I have tried your solution but it did not resolve the issue.

As Kwango mentioned the problem is only with safari.

Attach is the sample code.

Steps to reproduce:-

• Browse default.aspx
• click on Load Content
• After postback update panel content will become empty.

[Rumen]

Hi,

Thank you for the sample project! I examined and found that the reported issue is discussed in the following forum thread: RadEditor failing on async postback in Safari 14+.

With partial postback the framework expects the new HTML elements to be rendered by the time when the initialization scripts are called. Unfortunately in Safari 14 and 15 for some reason, the scripts preceded the rendering of the HTML content and this is causing the reported errors. This can be verified by adding a breakpoint inside some of the initialization scripts for the controls and seeing that the element for the control is not in the DOM.

The workaround until the problem gets fixed by the Safari vendor is to set the ContentAreaMode of RadEditor to div:  

<telerik:RadEditor runat="server" ID="RadEditor1" ContentAreaMode="div" ...

 

Regards,
Rumen
Progress Telerik

[Emirates Real Estate Solutions]

Hi,

I have tried this fix although it is working, I have been reluctant to consider it because of the following.

• Switching content-rendering-mode to div disturbed the content inside. We have defined templates that are in thousands for my business users and get loaded into the editor by default.  It requires changing all my templates that will require re-verification of all business scenarios.
• Also we have persisted HTML content for each business service, which contains all the HTML structure and styling, which is also in millions. Cannot even think to change those.

do you have any idea if this issue is in the knowledge of safari support? 

 

[Matthew]

You could always try to the crazy workaround that seemed to work for us in the end.

No guarantees as it's not founded in logic and oh boy do you have to leave a comment in explaining why it's there!

https://www.telerik.com/forums/radeditor-failing-on-async-postback-in-safari-14

 

 

[Rumen]

I can confirm that Matthew's workaround does work for the iframe content area mode:

I've found a work around which is pretty bizarre, I can't explain why it fixes it.

But adding the following at the start of the page load function so it's the first thing that gets instantiated stops the issue from occurring.  It's like the RadButton being on the page is instantiating something that the radeditor doesn't

        Dim radButton = New Telerik.Web.UI.RadButton
        radButton.ID = "buttonIdthing"
        PlaceHolder1.Controls.Add(radButton)

The test files are attached.

As to your question: do you have any idea if this issue is in the knowledge of safari support?  - I am not aware whether such a bug report is logged, but know that it will be hard to isolate it with a standard editable iframe to be able to report it since RadEditor is like an app with hundreds of thousands of lines of code and many scripts that are loaded in a specific order.

[Emirates Real Estate Solutions]

Thanks, Rumen for your support,

It worked for me.