Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

Reduce bg-size on :after to fix Safari bug #9770

Merged
merged 3 commits into from
Nov 12, 2023
Merged

Reduce bg-size on :after to fix Safari bug #9770

merged 3 commits into from
Nov 12, 2023

Conversation

YuriDevAT
Copy link
Member

@YuriDevAT YuriDevAT commented Nov 12, 2023

In Safari a background is shown when adding the glow animation effect to the Social Media Buttons (Links Section on Profile). This is due Safari and Safari on iOS currently not supporting animation and transition on CSS pseudo-elements like :after, while other browsers do.

Background visible on button in Safari

Resources: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Fixes Issue

Closes #9461

Changes proposed

By setting the background-size to 100% to the :after animation, the bug disappears. Setting the value more or less than 100% retains the bug, setting it to 0 would remove the glow as a whole, which is neither wanted nor needed.

💡 Due to this settings, notice that the heavy glow effect is now gone in general in all browsers.

Check List (Check all the applicable boxes)

  • My code follows the code style of this project.
  • My change requires changes to the documentation.
  • I have updated the documentation accordingly.
  • All new and existing tests passed.
  • This PR does not contain plagiarized content.
  • The title of my pull request is a short description of the requested changes.

Screenshots

Please see screenshots of the changes in Safari Browser.

Before the changes

Social Media Section showing visible background in Safari when selecting glow animation

After the changes

Unwanted background in Safari and heavy glow in all browsers are gone

Note to reviewers

I added a /* comment */ to the line 43 of my changes in case browser support changes in the future and the original effect will not be forgotten. This can be deleted if wished.

@github-actions github-actions bot added the issue linked Pull Request has issue linked label Nov 12, 2023
@YuriDevAT YuriDevAT changed the title WIP: Reduce bg-size on :after to fix Safari bug Reduce bg-size on :after to fix Safari bug Nov 12, 2023
@YuriDevAT YuriDevAT marked this pull request as ready for review November 12, 2023 09:27
Copy link
Member

@eddiejaoude eddiejaoude left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thank you Julia 👍

@eddiejaoude eddiejaoude merged commit db657aa into EddieHubCommunity:main Nov 12, 2023
@YuriDevAT YuriDevAT deleted the bg-visible-ios-9461 branch November 16, 2023 06:43
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
issue linked Pull Request has issue linked
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] background visible
2 participants