weixin_40001442
weixin_40001442
2020-11-28 11:56

[CORL-832] IE11 Compatibility for the Embed Stream

What does this PR do

This PR adds compatibility with IE11 for the embed stream.

  • Largely simplified babel configuration and added support for IE11
  • Updated various packages like babel, core-js, relay (not latest), found (not latest), etc. to support IE11
  • Polyfilled css variables, proxy, fetch, etc for IE11. Polyfills are loaded on demand if possible.
  • Fixed styling issues.
  • Fixed RTE issues not accepting IE11 contenteditable output.
  • Fixed RTE issues not sending onChange event in some cases.
  • Fixed View Discussion links for IE11.
  • Make counts work in IE11.

Note on count.js

If you directly include count.js on your site, you need to add class="coral-script" to the <script> in order for it to work on IE11.

html
<script class="coral-script" src="//%7B%7B%20CORAL_DOMAIN_NAME%20%7D%7D/assets/js/count.js" defer></script>

Dev-Note on CSS Variables

In order to support IE11 on the stream, every time new css is loaded, you need to call polyfillCSSVarsForIE11().

ts
import { polyfillCSSVarsForIE11 } from "coral-framework/helpers";

const loadProfileContainer = () =>
  import("./ProfileContainer" /* webpackChunkName: "profile" */).then(x => {
    // New css is loaded, take care of polyfilling those css vars for IE11.
    polyfillCSSVarsForIE11();
    return x;
  });

Dev-Note on CSS Calc

Various bugs exists around calc support in IE11 (see https://caniuse.com/#feat=calc). We work around most of them by pre-transforming the calc values using postcss-calc-function. Some css attributes might have an issue if you use css-variables inside calc.

该提问来源于开源项目:coralproject/talk

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • weixin_39603799 weixin_39603799 5月前

    If you select "Forgot Password" when changing your password, then click "Send Email", the modal for handling the process goes blank and becomes unusable.

    Screen Shot 2020-01-27 at 4 33 49 PM

    Screen Shot 2020-01-27 at 4 33 39 PM

    Screen Shot 2020-01-27 at 4 33 27 PM

    点赞 评论 复制链接分享
  • weixin_39603799 weixin_39603799 5月前

    Rich text editor buttons aren't rendering when the "Enable message box for this story" option is turned on.

    image

    点赞 评论 复制链接分享
  • weixin_39603799 weixin_39603799 5月前

    If I try and login using the Sign In modal and I type my password incorrectly, instead of validation errors/messages, the modal goes blank and is unusable.

    image

    点赞 评论 复制链接分享
  • weixin_39603799 weixin_39603799 5月前

    If I use the Forgot Password option and then change my mind and Go back to sign in page, the login modal goes blank and becomes unusable.

    Screen Shot 2020-01-27 at 4 15 57 PM

    Screen Shot 2020-01-27 at 4 16 12 PM

    点赞 评论 复制链接分享
  • weixin_39603799 weixin_39603799 5月前

    Callouts don't seem to respect line-wrapping. Not sure if we're too worried about this, but it is a minor usability issue.

    image

    点赞 评论 复制链接分享
  • weixin_39603799 weixin_39603799 5月前

    If you click and drag within the password text box on registering a new account (say when you mistyped your password, want to select all and delete without using Ctrl+A), the entire sign in modal goes blank and is unusable.

    image

    Update: this is happening on all text fields within the sign in modal.

    点赞 评论 复制链接分享
  • weixin_39603799 weixin_39603799 5月前

    Sign Up button isn't working and results in an empty window if you click Sign In on the stream, and then within the iframe, select Sign Up.

    Screen Shot 2020-01-27 at 4 01 51 PM

    Screen Shot 2020-01-27 at 4 01 59 PM

    点赞 评论 复制链接分享

相关推荐