Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-10-08 18:51:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: blurred news image background detail in firefox

Browse Source
This commit is contained in:
Jovan Krunić
2026-10-08 17:53:30 +02:00
parent 845ff65bb9
commit a99c6f5c77
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/src/app/modules/data/types/message/message-detail-content.html
+1 -1
View File
@@ -44,7 +44,7 @@
</div> </div>
} @else { } @else {
@if (item.image) { @if (item.image) {
<ion-thumbnail style="background-image: url('{{ item.image }}')"> <ion-thumbnail [style.--image]="'url(' + item.image + ')'">
<ion-img <ion-img
src="{{ item.image }}" src="{{ item.image }}"
(ionError)="$any($event.target).nextSibling.style.display = 'none'" (ionError)="$any($event.target).nextSibling.style.display = 'none'"
frontend/app/src/app/modules/data/types/message/message-detail-content.scss
+10 -5
View File
@@ -16,7 +16,6 @@
:host { :host {
ion-thumbnail { ion-thumbnail {
position: relative; position: relative;
transform: scaleX(-1);
overflow: hidden; overflow: hidden;
@@ -24,14 +23,20 @@
height: auto; height: auto;
margin-inline: auto; margin-inline: auto;
background-position: center; &::before {
background-size: contain; content: '';
position: absolute;
inset: -32px;
background: var(--image) center / cover;
filter: blur(32px);
}
ion-img { ion-img {
backdrop-filter: blur(32px); position: relative; // above ::before
&::part(image) { &::part(image) {
transform: scaleX(-1);
max-width: 16cm; max-width: 16cm;
margin-inline: auto; margin-inline: auto;
object-fit: contain; object-fit: contain;