404 errors on images using relative protocols, when Lazyload for CSS Background is enabled
Before submitting an issue please check that you’ve completed the following steps: yes - Made sure you’re on the latest version yes - Used the search feature to ensure that the bug hasn’t been reported before
Describe the bug
When relative protocols are used in the CSS, for image URLs, the resulting Background image in the JSON rocket_pairs will have an incorrect path, containing the URL twice:
CSS:
background-image: url("//www.site.comp/wp-content/uploads/2023/03/image.jpg");
JSON path:
https:\/\/www.site.com\/www.site.com\/wp-content\/uploads\/2023\/08\/image.jpg
Please note double URL in the JSON.
To Reproduce Steps to reproduce the behavior:
- Add a CSS bg image with relative protocol
- Enable Lazyload for Background CSS images
- See the 404 images
Expected behavior we should be able to handle relative protocols.
Screenshots Origin CSS: https://i.imgur.com/WlKBOfi.png result JSON: https://i.imgur.com/YCP90br.png
Additional context Ticket: https://secure.helpscout.net/conversation/2476111039/468216?folderId=2683093 Slack thread: https://wp-media.slack.com/archives/C43T1AYMQ/p1704917985182319
Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming
Related:
https://secure.helpscout.net/conversation/2683568038/508255/
Related: https://secure.helpscout.net/conversation/2729007953/516740/
Related: https://secure.helpscout.net/conversation/2754186609/521370
Another case: https://secure.helpscout.net/conversation/2926565892/558092