Merge pull request #5532 from KDSBrowne/xx.fix-whiteboard-textarea-flicker

Prevent whiteboard textarea flickering

bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/component.jsx

@@ -138,9 +138,11 @@ export default class TextDrawComponent extends Component {
 
   renderViewerTextShape(results) {
     const styles = TextDrawComponent.getViewerStyles(results);
+    const { isChrome, isEdge } = this.props.browserType;
 
     return (
       <g>
+        { isChrome || isEdge ? null :
         <clipPath id={this.props.annotation.id}>
           <rect
             x={results.x}
@@ -149,7 +151,7 @@ export default class TextDrawComponent extends Component {
             height={results.height}
           />
         </clipPath>
-
+        }
         <foreignObject
           clipPath={`url(#${this.props.annotation.id})`}
           x={results.x}

bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/container.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
+import deviceInfo from '/imports/utils/deviceInfo';
 import TextShapeService from './service';
 import TextDrawComponent from './component';
 
@@ -20,5 +21,6 @@ export default withTracker((params) => {
     isActive,
     setTextShapeValue: TextShapeService.setTextShapeValue,
     resetTextShapeActiveId: TextShapeService.resetTextShapeActiveId,
+    browserType: deviceInfo.browserType(),
   };
 })(TextDrawContainer);

bigbluebutton-html5/imports/utils/deviceInfo.js

@@ -18,6 +18,7 @@ const deviceInfo = {
       isChrome: !!window.chrome && !!window.chrome.webstore,
       isFirefox: typeof InstallTrigger !== 'undefined',
       isIE: 'ActiveXObject' in window,
+      isEdge: !document.documentMode && window.StyleMedia,
     };
   },
   osType() {