Skip to content

Commit

Permalink
Show backround on img tag only when img is loaded
Browse files Browse the repository at this point in the history
To avoid antializing issue with background
we show background on theparent element of img (.ImageBase)
while img is loading or in case there is no src at all.
But when img is loaded we disable background on .ImageBase
and show background on img itself
  • Loading branch information
mendrew committed May 13, 2024
1 parent 0005549 commit b5bdfa1
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions packages/vkui/src/components/ImageBase/ImageBase.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,9 @@
flex-shrink: 0;
box-sizing: border-box;
color: var(--vkui_internal--icon_color, var(--vkui--color_icon_secondary));
isolation: isolate;
background-color: var(--vkui--color_background_secondary);
background-size: cover;
isolation: isolate;
}

.ImageBase--transparent-background {
background-color: transparent;
}

.ImageBase__border {
Expand Down Expand Up @@ -41,6 +37,14 @@

.ImageBase--loaded .ImageBase__img {
visibility: visible;
background-color: var(--vkui--color_background_secondary);
background-size: cover;
}

.ImageBase--transparent-background,
.ImageBase--transparent-background .ImageBase__img,
.ImageBase--loaded {
background-color: transparent;
}

.ImageBase__fallback {
Expand Down

0 comments on commit b5bdfa1

Please sign in to comment.