Cross browser compatibility broken if responsive image multiplier is used

Created on 8 November 2022, over 1 year ago
Updated 22 May 2024, about 1 month ago

Problem/Motivation

Responsive images with the multiplier set look differently on Chrome and FF.

Steps to reproduce

  1. `drush si demo_umami`,
  2. `drush cex -y`,
  3. update /config/sync/responsive_image.styles.3_2_image.yml with the config below (leave uuid),
  4. `drush cim -y`,
  5. visit /en/articles/dairy-free-and-delicious-milk-chocolate on FF and Chrome.
langcode: en
status: true
dependencies:
  config:
    - image.style.large
    - image.style.large_21_9
    - image.style.large_3_2_768x512
    - image.style.medium
    - image.style.square_small
  theme:
    - umami
_core:
  default_config_hash: mtmXtN8C-WzPGe-FLVGv1SrYZn1g5va-X8LeQt3iGoE
id: 3_2_image
label: '3:2 Image'
image_style_mappings:
  -
    image_mapping_type: image_style
    image_mapping: large_21_9
    breakpoint_id: umami.wide
    multiplier: 1x
  -
    image_mapping_type: image_style
    image_mapping: large_3_2_768x512
    breakpoint_id: umami.wide
    multiplier: 2x
  -
    image_mapping_type: image_style
    image_mapping: large
    breakpoint_id: umami.narrow
    multiplier: 1x
  -
    image_mapping_type: image_style
    image_mapping: medium
    breakpoint_id: umami.narrow
    multiplier: 2x
breakpoint_group: umami
fallback_image_style: square_small

Result should be:

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Postponed: needs info

Version

11.0 πŸ”₯

Component
Responsive imageΒ  β†’

Last updated 12 days ago

Created by

πŸ‡΅πŸ‡±Poland Graber

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¦πŸ‡ΊAustralia mstrelan

    I'm unable to reproduce this in HEAD with Firefox 126 and Chrome 125. Perhaps this is outdated? Marking PMNMI in case there are additional steps to reproduce.

    Firefox:

    Chrome:

    Diff of the responsive image style config below:

    diff --git a/sites/default/files/config/sync/responsive_image.styles.3_2_image.yml b/sites/default/files/config/sync/responsive_image.styles.3_2_image.yml
    index 3993347dbd..cda9d07e16 100644
    --- a/sites/default/files/config/sync/responsive_image.styles.3_2_image.yml
    +++ b/sites/default/files/config/sync/responsive_image.styles.3_2_image.yml
    @@ -3,25 +3,37 @@ langcode: en
     status: true
     dependencies:
       config:
    -    - image.style.large_3_2_2x
    +    - image.style.large
    +    - image.style.large_21_9
         - image.style.large_3_2_768x512
    -    - image.style.medium_3_2_2x
    -    - image.style.medium_3_2_600x400
    +    - image.style.medium
    +    - image.style.square_small
    +  theme:
    +    - umami
     _core:
       default_config_hash: mtmXtN8C-WzPGe-FLVGv1SrYZn1g5va-X8LeQt3iGoE
     id: 3_2_image
     label: '3:2 Image'
     image_style_mappings:
       -
    -    image_mapping_type: sizes
    -    image_mapping:
    -      sizes: 100vw
    -      sizes_image_styles:
    -        - large_3_2_2x
    -        - large_3_2_768x512
    -        - medium_3_2_2x
    -        - medium_3_2_600x400
    -    breakpoint_id: responsive_image.viewport_sizing
    +    image_mapping_type: image_style
    +    image_mapping: large_21_9
    +    breakpoint_id: umami.wide
         multiplier: 1x
    -breakpoint_group: responsive_image
    -fallback_image_style: large_3_2_768x512
    +  -
    +    image_mapping_type: image_style
    +    image_mapping: large_3_2_768x512
    +    breakpoint_id: umami.wide
    +    multiplier: 2x
    +  -
    +    image_mapping_type: image_style
    +    image_mapping: large
    +    breakpoint_id: umami.narrow
    +    multiplier: 1x
    +  -
    +    image_mapping_type: image_style
    +    image_mapping: medium
    +    breakpoint_id: umami.narrow
    +    multiplier: 2x
    +breakpoint_group: umami
    +fallback_image_style: square_small
    
Production build 0.69.0 2024