🐛 [Story interactive] Post-Selection Fill Bug Fix for Image Quizzes a…

…nd Polls (#35274) * Start converting scale percentages to numbers * Fix scaling * Fix overflow bug * Update z-index MD file * Fix Safari shift
ampproject · Jul 19, 2021 · 868f0cf · 868f0cf
1 parent 21a9024
commit 868f0cf
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 4 deletions.
diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md
@@ -131,6 +131,8 @@
 | `.i-amphtml-glass-pane`                                                                                   | 1          | [extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css](/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css)                                                   |
 | `setStyles`                                                                                               | 1          | [extensions/amp-story-auto-ads/0.1/story-ad-button-text-fitter.js](/extensions/amp-story-auto-ads/0.1/story-ad-button-text-fitter.js)                                   |
 | `.i-amphtml-story-dev-tools-device-dialog-bg`                                                             | 1          | [extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css](/extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css)                       |
+| `.i-amphtml-story-interactive-img-quiz-answer-choice`                                                     | 1          | [extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.css)                     |
+| `.i-amphtml-story-interactive-img-option-img`                                                             | 1          | [extensions/amp-story-interactive/0.1/amp-story-interactive-img.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-img.css)                               |
 | `.i-amphtml-story-interactive-option-text`                                                                | 1          | [extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-poll.css)                             |
 | `.i-amphtml-story-interactive-slider-bubble`                                                              | 1          | [extensions/amp-story-interactive/0.1/amp-story-interactive-slider.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-slider.css)                         |
 | `.i-amphtml-story-interactive-slider-input::before`                                                       | 1          | [extensions/amp-story-interactive/0.1/amp-story-interactive-slider.css](/extensions/amp-story-interactive/0.1/amp-story-interactive-slider.css)                         |

diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-img-poll.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-img-poll.js
@@ -130,7 +130,7 @@ export class AmpStoryInteractiveImgPoll extends AmpStoryInteractive {
       el.querySelector(
         '.i-amphtml-story-interactive-img-option-percentage-text'
       ).textContent = `${percentages[index]}%`;
-      setImportantStyles(el, {'--option-percentage': `${percentages[index]}%`});
+      setImportantStyles(el, {'--option-percentage': percentages[index] / 100});
     });
   }
 }
diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.css b/extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.css
@@ -26,6 +26,7 @@
   color: var(--i-amphtml-interactive-option-answer-choice-color) !important;
   font-weight: 700 !important;
   line-height: 1.5em !important;
+  z-index: 1 !important;
 }
 
 .i-amphtml-story-interactive-img-container:not([dir='rtl'])
@@ -44,6 +45,7 @@
   height: 100% !important;
   border-radius: 50% !important;
   position: absolute !important;
+  left: 0 !important;
 }
 
 .i-amphtml-story-interactive-img-option[correct='correct'] {

diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.js b/extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.js
@@ -172,7 +172,7 @@ export class AmpStoryInteractiveImgQuiz extends AmpStoryInteractive {
       el.querySelector(
         '.i-amphtml-story-interactive-img-option-percentage-text'
       ).textContent = `${percentages[index]}%`;
-      setImportantStyles(el, {'--option-percentage': `${percentages[index]}%`});
+      setImportantStyles(el, {'--option-percentage': percentages[index] / 100});
     });
   }
 

diff --git a/extensions/amp-story-interactive/0.1/amp-story-interactive-img.css b/extensions/amp-story-interactive/0.1/amp-story-interactive-img.css
@@ -62,6 +62,9 @@
   background-position: center !important;
   background-size: cover !important;
   box-shadow: var(--i-amphtml-interactive-img-border) !important;
+  /* Needed for overflow inconsistencies during animations on some browsers */
+  position: relative !important;
+  z-index: 1 !important;
 }
 
 .i-amphtml-story-interactive-img-option:focus {
@@ -79,7 +82,7 @@
   display: block !important;
   width: 100% !important;
   height: 100% !important;
-  transform: scaleY(0%) !important;
+  transform: scaleY(0) !important;
   transform-origin: bottom !important;
   opacity: 0.5 !important;
 }
@@ -93,7 +96,7 @@
 .i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
   .i-amphtml-story-interactive-img-option-img::before {
   background-color: var(--i-amphtml-interactive-option-post-color) !important;
-  transform: scaleY(var(--option-percentage, 0%)) !important;
+  transform: scaleY(var(--option-percentage, 0)) !important;
   transition: transform var(--i-amphtml-interactive-animation-time)
     var(--i-amphtml-interactive-ease-out-curve) !important;
 }