Hide ImageBase__img when img is loaded #6847
Conversation
size-limit report 📦
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
e2e tests |
👀 Docs deployed
Commit e434451 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #6847 +/- ##
==========================================
- Coverage 83.35% 83.35% -0.01%
==========================================
Files 351 351
Lines 10470 10469 -1
Branches 3475 3475
==========================================
- Hits 8727 8726 -1
Misses 1743 1743
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
Тест флакнул и похоже все еще вылезает 
|
О, кстати, метко подмечено, у меня глаз замылился в связке с Спасибо! |
vkcom-publisher
added
the
pr-needs-work
|
PR закрыт из-за отсутствия активности в течение последних 14 дней. Если это произошло по ошибке или изменения все ещё актуальны, откройте PR повторно. |
vkcom-publisher
removed
the
pr-needs-work
For some reasone when grandparent of ImageBase__img has border-radius and overflow: hidden we see background of ImageBase at the corner behind ImageBase__img, especially it is visible when the ImageBase__img has same colors as page background. Seems like this is due to ImageBase__image is absolutely positioned, so, parent background is partly visible at corners. The solution is to make ImageBase__img static. This is actully how it used to be in Avatar component before it has been refactored to ImageBase. see ae00ed7 and cdc74df where .Avatar__img has been relatively positioned. Also, we remove negative z-index from img as it doesn't change much results in e2e tests. Negative z-index was introduced in 9d47c34
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
mendrew
force-pushed
the
mendrew/fix/BaseImage/make-img-static-to-fix-background-arc-of-parent
branch
from
b5bdfa1 to
ee2ea96
Compare
mendrew
changed the title
mendrew
deleted the
mendrew/fix/BaseImage/make-img-static-to-fix-background-arc-of-parent
branch
Описание
Согласно #6850 иногда фон
ImageBaseвыглядывает из-за изображение, особенно, если фонImageBaseотличается по цвету от фона контейнера.Довольно интересная особенность, проявляющаяся при абсолютном позиционировании
imgвнутриImageBase, когда у родительский элементImageBaseобрезает края с помощьюborder-radiusи overflow: hidden.Проблема связана со сглаживанием углов в бразузерах. Проблема старая и красивого решения для неё нет.
В хроме сработало бы выставление фона на самом компоненте img, но это не работает в Firefox.
Как вариант мы могли бы немного уменьшать фон, чтобы он так не выглядывал, но с разным значением border-radius надо добавлять разные отступы для фона.
Лучше всего просто фон убирать, если изображение загрузилось.
Изменения
В качестве решения мы убираем фон после загрузки изображения.
Изображения