Responsive srcsets not working in all browsers

The CMS Questions
1

Hey fellow kirby friends,

i am using images in my kirby projects with the srcsets settings in combination with webp, like described here: Responsive images | Kirby CMS

The idea is to automatically generate smaller Images for smaller screen sizes, which works very well in Chrome on Windows and Android. Today i tested the settings inside Firefox on Android and also Safari on iPhone.

Problem:
These browsers dont use the correct image for the respective viewport-width.

Here is my config for the srcsets:

'thumbs' => [
    'srcsets' => [
      'default' => [
        '400w' => ['width' => 400, 'format' => 'webp', 'quality' => 70],
        '992w' => ['width' => 992, 'format' => 'webp', 'quality' => 70],
        '1400w' => ['width' => 1400, 'format' => 'webp', 'quality' => 70],
        '2048w' => ['width' => 2048, 'format' => 'webp', 'quality' => 70]
      ],
    ]
  ],

and here is my implementation to render the image:

<picture class="inline-flex">
      <source srcset="<?= $image->srcset('default') ?>" type="image/webp">      
      <img src="<?= $image->url() ?>" alt="<?= $altText ?>" width="<?= $image->width() ?>" height="<?= $image->height() ?>">
    </picture>

which will render the picture in the html code like this:

<picture class="inline-flex">
      <source srcset="http://192.168.178.33/kirby-four/media/pages/module/e258a448a6-1690536677/deat_to_stock_goods_3-400x-q70.webp 400w, 
http://192.168.178.33/kirby-four/media/pages/module/e258a448a6-1690536677/deat_to_stock_goods_3-992x-q70.webp 992w, 
http://192.168.178.33/kirby-four/media/pages/module/e258a448a6-1690536677/deat_to_stock_goods_3-1400x-q70.webp 1400w, 
http://192.168.178.33/kirby-four/media/pages/module/e258a448a6-1690536677/deat_to_stock_goods_3-2048x-q70.webp 2048w" type="image/webp">      
      <img src="http://192.168.178.33/kirby-four/media/pages/module/e258a448a6-1690536677/deat_to_stock_goods_3.jpg" alt="" class="img-fluid" width="2048" height="1365">
    </picture>

From what i read among other sources, is that you can specify the media-Atrribute inside the source tag, which i did in a recent project. With the following code i got all images rendered properly in all browsers and all screen sizes:

<picture>
   <source media="(max-width: 400px)" srcset="<?= $image->thumb('teamsliderSM')->url() ?>" type="image/webp"> 
   <source media="(max-width: 768px)" srcset="<?= $image->thumb('teamsliderMD')->url() ?>" type="image/webp"> 
   <source media="(max-width: 1024px)" srcset="<?= $image->thumb('teamsliderLG')->url() ?>" type="image/webp"> 
   <source media="(max-width: 1280px)" srcset="<?= $image->thumb('teamSliderFull')->url() ?>" type="image/webp"> 
   <source srcset="<?= $image->thumb('teamSliderFull')->url() ?>" type="image/webp"> 
   <img src="<?= $image->url() ?>" alt="<?= $block->teamName() ?>" class="img-fluid" width="<?= $image->width() ?>" height="<?= $image->height() ?>">
</picture>

For this solution i switched to using thumb presets in my config like this:

'thumbs' => [
      ],
      'presets' => [  
        'teamsliderSM' => ['width' => 400, 'height' => 500, 'crop' => true, 'format' => 'webp', 'quality' => 70],
        'teamsliderMD' => ['width' => 800, 'height' => 1000, 'crop' => true, 'format' => 'webp', 'quality' => 70],
        'teamsliderLG' => ['width' => 1000, 'height' => 800, 'crop' => true, 'format' => 'webp', 'quality' => 70],
        'teamSliderFull' => ['width' => 1920, 'height' => 1080, 'crop' => true, 'format' => 'webp', 'quality' => 70]
      ]
  ],

From what i found out is that there should be a parameter for the sorcsets definition to pass the media-atribute to the srcset definition, since the source tags are placed automatically inside the picture when handing over a srcset Name. Something like this:

'thumbs' => [
    'srcsets' => [
      'default' => [
        '400w' => ['width' => 400, 'format' => 'webp', 'quality' => 70, 'media' => 'min-400'],
      ],
  ],
]

anyone else experienced this? Or am i missing something…