Page MenuHomePhabricator

Blurry banners on browsers with poor support for srcset
Closed, ResolvedPublic

Description

On English Wikivoyage Traveller's Pub, User:Andrewssi2 notes

The banner on your test page is very blurry on a Macbook Pro Retina with the Safari browser. The same banner used on Asia looks fine.

"test page" being referred to is http://pagebanner.wmflabs.org/wiki/Roppongi ( This has the new proposed banner template - Blurry )

"Asia page" being referred to is https://en.wikivoyage.org/wiki/Asia ( This has the old Banner template currently in use on Wikivoyage - Works fine )

Banner being used: https://commons.wikimedia.org/wiki/File:Ladakh_banner.jpg

This summarises the support for "srcset" http://caniuse.com/#feat=srcset

Event Timeline

Sumit created this task.Jul 8 2015, 5:53 PM
Sumit raised the priority of this task from to Needs Triage.
Sumit updated the task description. (Show Details)
Sumit added a project: Wikidata-Page-Banner.
Sumit moved this task to June 26-July 18 on the Wikidata-Page-Banner board.
Sumit added subscribers: Sumit, Jdlrobson, Nicolas_Raoul.
Restricted Application added a project: Wikidata. · View Herald TranscriptJul 8 2015, 5:53 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sumit set Security to None.

Which page has the problem? Given Asia works fine, I suspect it is an issue with the image being used - e.g. the image is not available in a high resolution.

Sumit updated the task description. (Show Details)Jul 8 2015, 6:00 PM
Sumit updated the task description. (Show Details)
Andrewssi2 updated the task description. (Show Details)Jul 8 2015, 11:58 PM
Andrewssi2 added a subscriber: Andrewssi2.

@Jdlrobson

I have updated the description. Basically the same banner image is being used by the old banner template on Wikivoyage Asia and the test page with the proposed banner template. One is blurry and the other is not.

Andrewssi2 updated the task description. (Show Details)Jul 9 2015, 12:07 AM
Andrewssi2 updated the task description. (Show Details)
Sumit renamed this task from Blurry banners on Macbook pro Retina with Safari to Blurry banners on old browsers with poor support for srcset.Jul 9 2015, 7:53 AM
Sumit updated the task description. (Show Details)
Sumit updated the task description. (Show Details)

Change 223746 had a related patch set uploaded (by Sumit):
Fix blurry banners when no support for srcset

https://gerrit.wikimedia.org/r/223746

Andrewssi2 renamed this task from Blurry banners on old browsers with poor support for srcset to Blurry banners on browsers with poor support for srcset.EditedJul 9 2015, 8:51 AM

I removed the word 'old' from the title. It gives the completely wrong impression that this is only an issue for legacy browsers, whereas in fact the latest versions of Safari and Opera were used.

Additionally the matrix in the description suggests that IE11 (not by any definition an old browser) also doesn't support SourceSet

I upgraded Opera and indeed it works now.
Both me and another Wikivoyage contributor had this problem, so I guess it would affect quite a lot of people.

Sumit added a comment.Jul 9 2015, 9:12 AM

I've added a fallback, so hopefully it should work, I'll update pagebanner.wmflabs.org once it is merged, for it to be tested.

Sumit added a comment.Jul 15 2015, 8:41 AM

I've uploaded the above fix on http://pagebanner.wmflabs.org, http://pagebanner.wmflabs.org/wiki/Roppongi can now be loaded on browsers earlier showing blurry banners to see if they now load clear one's. Let me know through comments :)

Change 223746 merged by jenkins-bot:
Fix blurry banners when no support for srcset

https://gerrit.wikimedia.org/r/223746

Jdlrobson closed this task as Resolved.Jul 15 2015, 10:43 AM
Jdlrobson claimed this task.

Patch is merged so this issue should now be fixed. Please reopen if you have reason to believe this is not the case.