Banner image missing on the phone

[xnox]

Note - filling in this form will file an issue against the canonical.com website

Summary

On the phone, banner image is missing

Process

Open microcloud blog on the phone

https://canonical.com/blog/canonical_releases_microcloud

Current and expected result

No banner image, expect one.

Screenshot

Browser details

Edge on android

[xnox]

https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,c_fill,w_13824,h_6912/https://ubuntu.com/wp-content/uploads/bf02/Banner-Launch-1-1.png

Seems to be broken,

Whilst

https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,c_fill,w_6912,h_3456/https://ubuntu.com/wp-content/uploads/bf02/Banner-Launch-1-1.png

Works.

So I guess some of the CDN responsive assets are damaged.

[xnox]

Or wrong responsive assets are being referenced.

Note my phone is in "desktop view" mode.

[setharnold]

I see a similar problem with Firefox on Focal. (I've got uBlock origin and Tridactyl installed, potentially mucking things up, but they've been very reliable lately.)

[xnox]

also love my phone screenshot resolution -> just like super humongous.

[mtruj013]

@xnox @setharnold it looks like this has been fixed, could you all confirm if you're still having this issue on your end? Thanks!

[xnox]

@xnox @setharnold it looks like this has been fixed, could you all confirm if you're still having this issue on your end? Thanks!

On Edge Browser, on Android phone, it is still broken for me.

[setharnold]

@mtruj013 sorry for the delay, it's been a busy few months. In any event this is still broken on both my Ubuntu Firefox and my Android Chrome.

My console on Firefox is filled with a lot of alarming warnings and so on. Perhaps one of these can suggest what's different between my environment and yours?

Cookie “” has been rejected as third-party. ProxyChannelFilter.sys.mjs:418:18
Unknown property ‘-moz-justify-content’.  Declaration dropped. www-player.css:1:64781
Error in parsing value for ‘-webkit-appearance’.  Declaration dropped. styles.css:1:48550
Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped. www-player.css:1:77232
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. styles.css:1:54445
Expected declaration but found ‘;’.  Skipped to next declaration. www-player.css:1:83071
Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped. www-player.css:1:83681
Error in parsing value for ‘-webkit-text-size-adjust’.  Declaration dropped. styles.css:1:63809
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. styles.css:1:92072
Ruleset ignored due to bad selector. styles.css:1:109238
Unknown pseudo-class or pseudo-element ‘-moz-focus-outer’.  Ruleset ignored due to bad selector. styles.css:1:109688
Error in parsing value for ‘left’.  Declaration dropped. www-player.css:1:145639
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:175990
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:176125
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:176400
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:176753
Error in parsing value for ‘-webkit-appearance’.  Declaration dropped. styles.css:1:140814
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:190436
Error in parsing value for ‘left’.  Declaration dropped. www-player.css:1:199058
Error in parsing value for ‘margin’.  Declaration dropped. www-player.css:1:218603
Error in parsing value for ‘line-height’.  Declaration dropped. www-player.css:1:223471
Unknown property ‘-moz-justify-content’.  Declaration dropped. www-player.css:1:226349
Unknown property ‘-moz-justify-content’.  Declaration dropped. www-player.css:1:237891
Unknown property ‘-moz-justify-content’.  Declaration dropped. www-player.css:1:239079
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:242964
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:243151
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:243377
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:244466
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:261578
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:261793
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:263352
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:264298
Unknown property ‘-moz-background-size’.  Declaration dropped. www-player.css:1:267043
Unknown property ‘-moz-column-gap’.  Declaration dropped. styles.css:1:306670
Unknown property ‘-moz-columns’.  Declaration dropped. styles.css:1:306704
Error in parsing value for ‘max-width’.  Declaration dropped. www-player.css:1:306491
Unknown property ‘-moz-justify-content’.  Declaration dropped. www-player.css:1:324607
Error in parsing value for ‘-webkit-box-pack’.  Declaration dropped. www-player.css:1:324658
Unknown property ‘-moz-justify-content’.  Declaration dropped. www-player.css:1:335289
Error in parsing value for ‘margin-top’.  Declaration dropped. www-player.css:1:343433
Expected color but found ‘none’.  Error in parsing value for ‘background-color’.  Declaration dropped. www-player.css:1:347912
Error in parsing value for ‘top’.  Declaration dropped. www-player.css:1:349720
Error in parsing value for ‘top’.  Declaration dropped. www-player.css:1:349891
Unknown pseudo-class or pseudo-element ‘-internal-autofill-selected’.  Ruleset ignored due to bad selector. styles.css:1:377617
Unknown pseudo-class or pseudo-element ‘-internal-autofill-selected’.  Ruleset ignored due to bad selector. styles.css:1:378235
Unknown pseudo-class or pseudo-element ‘-internal-autofill-selected’.  Ruleset ignored due to bad selector. styles.css:1:379036
Error in parsing value for ‘margin-top’.  Declaration dropped. styles.css:1:467290
Error in parsing value for ‘flex-direction’.  Declaration dropped. styles.css:1:511711
Expected color but found ‘none’.  Error in parsing value for ‘background-color’.  Declaration dropped. styles.css:1:512950
Unknown property ‘-moz-column-gap’.  Declaration dropped. styles.css:1:522334
Error in parsing value for ‘padding’.  Declaration dropped. styles.css:1:527709
Unknown pseudo-class or pseudo-element ‘has’.  Ruleset ignored due to bad selector. styles.css:1:530301
Unknown property ‘-moz-columns’.  Declaration dropped. styles.css:1:530539
Unknown property ‘-moz-columns’.  Declaration dropped. styles.css:1:530605
Unknown property ‘-moz-column-gap’.  Declaration dropped. styles.css:1:533195
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. canonical_releases_microcloud:1:9724
Unknown property ‘-moz-column-count’.  Declaration dropped. canonical_releases_microcloud:1:16543
GET
https://assets.ubuntu.com/v1/f1ea362b-Ubuntu[wdth,wght]-latin-v0.896a.woff2
[HTTP/2 200  0ms]

GET
https://assets.ubuntu.com/v1/f1ea362b-Ubuntu[wdth,wght]-latin-v0.896a.woff2
[HTTP/2 200  0ms]

GET
https://assets.ubuntu.com/v1/90b59210-Ubuntu-Italic[wdth,wght]-latin-v0.896a.woff2
[HTTP/2 200  0ms]

GET
https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2
[HTTP/2 200  0ms]

GET
https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2
[HTTP/2 200  0ms]

XHRPOST
https://www.youtube.com/youtubei/v1/log_event?alt=json&key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8
[HTTP/2 200  44ms]

[immortalcodes]

This issue is related to how we scrape the data from Wordpress blog and then render the HTML, seems the URL that is being coming from the rendered HTML which is coming from WordPress API has concatenated URLs causing the issue of not loading the image.