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`