Merge pull request #6034 from KDSBrowne/02-iphone-polling-fix

Fix poll answers not being displayed on mobile safari

bigbluebutton-html5/imports/ui/components/polling/styles.scss

 @import "../../stylesheets/variables/_all";
 
+// pollingAnswer position offsets
+$xs-portrait-offset: 8.75em;
+$xs-landscape-offset: 4.75em;
+$s-portrait-offset: 11.75em;
+$s-landscape-offset: 1.75em;
+
 .pollingContainer {
   order: 2;
   width: 100%;
@@ -20,12 +26,29 @@
 }
 
 .pollingAnswers {
+  align-items: center;
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: auto;
   justify-content: center;
-  align-items: center;
+  position: relative;
   width: 100%;
+  z-index: 1;
+
+  :global(.browser-safari) & {
+    @include mq($ip5-portrait) {
+      bottom: $xs-portrait-offset;
+    }
+    @include mq($ip678-portrait) {
+      bottom: $s-portrait-offset;
+    }
+    @include mq($ip5-landscape) {
+      bottom: $xs-landscape-offset;
+    }
+    @include mq($ip678-landscape) {
+      bottom: $s-landscape-offset;
+    }
+  }
 }
 
 .pollButtonWrapper {

bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss

@@ -41,6 +41,16 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
 
+//iPhone 5 size range
+$ip5-range: "(min-device-width : 320px) and (max-device-width : 568px)";
+// iPhone 6, 7 and 8 size range
+$ip678-range: "(min-device-width : 375px) and (max-device-width : 667px)";
+
+$ip5-portrait: "#{$portrait} and #{$ip5-range}";
+$ip5-landscape: "#{$landscape} and #{$ip5-range}";
+$ip678-portrait: "#{$portrait} and #{$ip678-range}";
+$ip678-landscape: "#{$landscape} and #{$ip678-range}";
+
 $breakpoints: (
   'screen': $screen,
   'landscape': $landscape,