Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fix missing background colour on choice cards container #13960

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
May 16, 2025
Merged

Fix missing background colour on choice cards container #13960

merged 1 commit into from
May 16, 2025

Conversation

sookburt
Copy link
Contributor

@sookburt sookburt commented May 16, 2025 •
edited
Loading

What does this change?

In some rare instances, the background image in an article is showing through between the radio buttons of the choice cards. Example Safari on iPhone 12 mini (ios v14 & IOS 17.6.1).

While we have not been able to replicate this, the choice card container has no background colour explicitly set and the default for background-color is transparent.

This change ensures it inherits the background colour from the parent container which we believe should fix this issue.

Why?

In some rare instances, the background image in an article is showing through between the radio buttons of the choice cards which looks bad.

@sookburt sookburt requested a review from a team as a code owner May 16, 2025 12:48
@github-actions GitHub Actions
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@github-actions GitHub Actions
Copy link

Deploy build 18542 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@sookburt sookburt added the run_chromatic Runs chromatic when label is applied label May 16, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 16, 2025
@github-actions GitHub Actions
Copy link

Size Change: +17 B (0%)

Total Size: 974 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1008.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/1032.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/117.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1562.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/1656.client.web.********************.js 49.6 kB 0 B
dotcom-rendering/dist/1823.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/2045.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/2161.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/223.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/2270.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/2309.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/2345.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/2360.client.web.********************.js 20 kB 0 B
dotcom-rendering/dist/2502.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/302.client.web.********************.js 11.3 kB +7 B (+0.06%)
dotcom-rendering/dist/3292.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/3308.client.web.********************.js 3.12 kB 0 B
dotcom-rendering/dist/3384.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/3485.client.web.********************.js 4.67 kB 0 B
dotcom-rendering/dist/356.client.web.********************.js 6.4 kB 0 B
dotcom-rendering/dist/3598.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/3605.client.web.********************.js 15.1 kB 0 B
dotcom-rendering/dist/3619.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/3929.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/4133.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/4258.client.web.********************.js 4.08 kB 0 B
dotcom-rendering/dist/4306.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/4308.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/4324.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/4457.client.web.********************.js 6.26 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/476.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/4776.client.web.********************.js 11.6 kB 0 B
dotcom-rendering/dist/5144.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/5448.client.web.********************.js 4.37 kB 0 B
dotcom-rendering/dist/545.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/562.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/6038.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/6217.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/6480.client.web.********************.js 3.68 kB 0 B
dotcom-rendering/dist/6540.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/6541.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/6555.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/6562.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/6584.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/6722.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/6873.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/695.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB 0 B
dotcom-rendering/dist/732.client.web.********************.js 3.09 kB 0 B
dotcom-rendering/dist/7398.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/7708.client.web.********************.js 5.05 kB 0 B
dotcom-rendering/dist/7725.client.web.********************.js 5.6 kB +9 B (+0.16%)
dotcom-rendering/dist/7927.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/8151.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/8212.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/8385.client.web.********************.js 3.88 kB 0 B
dotcom-rendering/dist/8387.client.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/8436.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/8602.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/8619.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/864.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/8942.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/8973.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/9135.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/9139.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/9376.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/960.client.web.********************.js 7.99 kB 0 B
dotcom-rendering/dist/967.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/9822.client.web.********************.js 7.67 kB 0 B
dotcom-rendering/dist/9837.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/9870.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.43 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.6 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.61 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.57 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.3 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.45 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.98 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.2 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.5 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.12 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 16.1 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.4 kB +1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 854 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.83 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.98 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.58 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.65 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.24 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.7 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.14 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.63 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.29 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.2 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.21 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.91 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 487 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.18 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 893 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 919 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 1.11 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 2.6 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 4.97 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.9 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.8 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.13 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.85 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.06 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B 0 B

compressed-size-action

@sookburt sookburt merged commit db43b5f into main May 16, 2025
33 checks passed
@sookburt sookburt deleted the skb/fix-background-choice-cards branch May 16, 2025 13:18
@prout-bot
Copy link

Seen on PROD (merged by @sookburt 8 minutes and 56 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tomrf1 tomrf1 tomrf1 approved these changes

Assignees
No one assigned
Labels
dotcom-rendering Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@sookburt @prout-bot @tomrf1