diff --git a/src/elements/image/image.scss b/src/elements/image/image.scss index 8b72473527..ba9db1741d 100644 --- a/src/elements/image/image.scss +++ b/src/elements/image/image.scss @@ -85,13 +85,16 @@ } .sbb-image__img { - position: absolute; - inset: 0; opacity: 0.000001; :host([data-loaded]) & { opacity: 0.999999; } + + :host(:not([skip-lqip])) & { + position: absolute; + inset: 0; + } } .sbb-image__blurred { @@ -100,6 +103,11 @@ } } +// Avoids unwanted space or small cropping +picture { + display: contents; +} + // After successful loading an image, the loaded image is faded in over the blurred lqip image with a short transition. // To support transparent images, we need also to fade out the blurred lqip image. // This is not perfect in the case of a non transparent image, but does not look that bad. diff --git a/src/elements/image/image.stories.ts b/src/elements/image/image.stories.ts index e051828c80..55618550bc 100644 --- a/src/elements/image/image.stories.ts +++ b/src/elements/image/image.stories.ts @@ -1,6 +1,6 @@ import { withActions } from '@storybook/addon-actions/decorator'; import type { InputType } from '@storybook/types'; -import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components'; +import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; @@ -199,6 +199,15 @@ export const RoundBorderRadius: StoryObj = { }, }; +export const SkipLqip: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { + ...defaultArgs, + 'skip-lqip': true, + }, +}; + const meta: Meta = { decorators: [ (story) => html`
${story()}
`, diff --git a/src/elements/image/image.ts b/src/elements/image/image.ts index 34da303793..32b3762119 100644 --- a/src/elements/image/image.ts +++ b/src/elements/image/image.ts @@ -191,7 +191,7 @@ export class SbbImageElement extends LitElement { * the idea of lqip here: * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62 */ - @property({ attribute: 'skip-lqip', type: Boolean }) public skipLqip = false; + @property({ attribute: 'skip-lqip', type: Boolean, reflect: true }) public skipLqip = false; /** * A caption can provide additional context to the image (e.g. diff --git a/src/elements/image/image.visual.spec.ts b/src/elements/image/image.visual.spec.ts index a45e148a59..b69f110c20 100644 --- a/src/elements/image/image.visual.spec.ts +++ b/src/elements/image/image.visual.spec.ts @@ -146,5 +146,16 @@ describe(`sbb-image`, () => { await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); }), ); + + it( + 'skipLqip=true', + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html``, + ); + + await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + }), + ); }); });