Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰 [Story interactive] Fix Post-Selection Animation Inaccuracies for Image Quizzes #35292

Merged
merged 13 commits into from Jul 26, 2021

Conversation

Brandons42
Copy link
Contributor

@Brandons42 Brandons42 commented Jul 19, 2021

Removes a flash of white around the answer choice bubble of the selected option that appears on some browsers when using a dark theme image quiz and slight 1 pixel layout shifts after post-selection animations

Demos:
https://interactive-img.web.app/animation-fix/quiz.html
https://interactive-img.web.app/animation-fix/text-quiz.html

Fixes #35287

/cc @mszylkowski
/cc @processprocess

@amp-owners-bot
Copy link

amp-owners-bot bot commented Jul 19, 2021

Hey @gmajoulet, @mszylkowski! These files were changed:

extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.css
extensions/amp-story-interactive/0.1/amp-story-interactive-img.css
extensions/amp-story-interactive/0.1/amp-story-interactive.css

@mszylkowski mszylkowski added this to In progress in wg-stories Sprint via automation Jul 19, 2021
@mszylkowski
Copy link
Contributor

What's the issue? Is it that if the number of pixels is not rounded then the rendering glitches?

If so, can you link a "before" demo (any link that doesn't have this fix) so we can cross check the fix works?

@Brandons42
Copy link
Contributor Author

What's the issue? Is it that if the number of pixels is not rounded then the rendering glitches?

If so, can you link a "before" demo (any link that doesn't have this fix) so we can cross check the fix works?

I updated the issue (#35287) with a demo video that was made at this link on Chrome for iOS: https://interactive-img.web.app/fill-bug/quiz.html

@Brandons42
Copy link
Contributor Author

Just removed the border style rule from the keyframes animation, demos for the image and text quiz are in the description

@mszylkowski
Copy link
Contributor

I see on the text quiz demo that the check/cross icons in the animation shift when the animation ends, which I think could be coming from the border change. You may need an extra rule somewhere that adds the border directly to the circle

@Brandons42 Brandons42 changed the title 馃悰 [Story interactive] Fix answer choice border during animation for image quizzes 馃悰 [Story interactive] Fix Post-Selection Animation Inaccuracies for Image Quizzes Jul 22, 2021
@mszylkowski
Copy link
Contributor

The ABCD circle borders are cut-off in some cases due to browser glitches, adding a margin will make it go away in some cases but the glitch still persists sometimes. Let us know when that's fixed, but the other stuff LGTM

@processprocess processprocess merged commit e7326ab into ampproject:main Jul 26, 2021
wg-stories Sprint automation moved this from In progress to Done Jul 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

[Story interactive] White Flash on Selection for Dark Theme Image Quizzes
4 participants