Skip to content

picture tag request twice on Safari #12187

@denghui1010

Description

@denghui1010

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNrFk1Fv0zAQx7+K8ctAWuMkbdFahSFAk4AHQIDgxRLynEvikdjGdtqgqt+dc7K0Q0J7JYoS3/3P55/tuwN9ZW2y64FuaeGlUzZccw2DNS6QEirRt4EcuCakFEE8fTaNCXEQeqdni5DO11ty8Rba1pDvxrXlk4tJOsYffvAt2GkBNAJ0thUB0CKkaLLrwyFmIcdjwdAavUrbPpDdojMltC84RZ3TSbJKIsE0Oz6FN72TMJuEhN8WcIrqRA1sD7eW07PonfQQUG5CsFvGMJvw3ix8EEHJZFDCNEbXvukTaTpWwSKyVsZ1bJ2tpUzzq1Uu8+WmzNJcgkg3VSnT2026WaXPZZWl5Tqxun45rv5NwT5nOduzZZqyX+wqZTGTCPdYhJ13obr6L8r/joghDwiLiHF/7gU7XSG9pMFLoytVJ3feaCymsTI4RTSrWnAfbVBGe063c81wKrBY9u9HX3A9XM5+2YD8+Q//nR+ij9NPDjy4HXB60oJwNYRJvvnyAQYcn0Qsn77F6EfEz+BN20fGKex1r0vEfhA30r7rYmMoXX/1N0MA7edNRdCx0sd4TrGj3jyy9TPuMlnNHYKn+GMHLubEA1wm6yTL6fEPYxwpAQ==

Steps to reproduce

open devtools
refresh the page
see request for 515cc02842c239d102cea09fdc0b909406cf10d5.png

What is expected?

only one webp request

if we use a simple html like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  </head>
  <body>
    <picture>
      <source
        type="image/webp"
        srcset="http://picasso-static.xiaohongshu.com/fe-platform/515cc02842c239d102cea09fdc0b909406cf10d5.png?imageView2/2/w/300/q/80/format/webp" />
      <img
        src="http://picasso-static.xiaohongshu.com/fe-platform/515cc02842c239d102cea09fdc0b909406cf10d5.png?imageView2/2/w/300/q/80/format/png" />
    </picture>
  </body>
</html>

we only get one request which type is webp:
image

What is actually happening?

see two request named 515cc02842c239d102cea09fdc0b909406cf10d5.png,one is webp,other is png
image

System Info

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions