Contrib.social

2x Image Displaying large in Safari

Open on Drupal.org →
Created on 22 February 2016, over 8 years ago
Updated 19 September 2023, 9 months ago

I have an image style set up to scale height to 420 and 840 for 2x. In Chrome and Firefox it works perfectly but in Safari it does use the 2x version but it actually displays it at 840px. Since it is retina it should use the 2x version but display it at 420px.

<picture class="img-responsive">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://mysite.com/sites/default/files/styles/style_thumbnail/public/style/myimage.jpg?itok=cLn4wRB0&timestamp=1454003484 1x, http://mysite.com/sites/default/files/styles/style_thumbnail_2x/public/style/myimage.jpg?itok=3MQmvtDN&timestamp=1454003484 2x" media="(min-width: 992px)">
<source srcset="http://mysite.com/sites/default/files/styles/style_thumbnail_tablet/public/style/myimage.jpg?itok=msIQaLVI&timestamp=1454003484 1x, http://mysite.com/sites/default/files/styles/style_thumbnail_tablet_2x/public/style/myimage.jpg?itok=JVUX77Df&timestamp=1454003484 2x" media="(min-width: 768px)">
<source srcset="http://mysite.com/sites/default/files/styles/style_thumbnail_mobile_large/public/style/myimage.jpg?itok=GAKcLMwR&timestamp=1454003484 1x, http://mysite.com/sites/default/files/styles/style_thumbnail_mobile_large_2x/public/style/myimage.jpg?itok=CvC8dg2Q&timestamp=1454003484 2x" media="(min-width: 560px)">
<source srcset="http://mysite.com/sites/default/files/styles/style_thumbnail_mobile/public/style/myimage.jpg?itok=R48zIoxf&timestamp=1454003484 1x, http://mysite.com/sites/default/files/styles/style_thumbnail_mobile_2x/public/style/myimage.jpg?itok=xZNq47ds&timestamp=1454003484 2x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<!--[if lt IE 9]>
<img  class="img-responsive" src="http://mysite.com/sites/default/files/styles/style_thumbnail/public/style/myimage.jpg?itok=cLn4wRB0&timestamp=1454003484" alt="" title="" />
<![endif]-->
<!--[if !lt IE 9]><!-->
<img class="img-responsive" srcset="" alt="" title="" data-pfsrcset="http://mysite.com/sites/default/files/styles/style_thumbnail/public/style/myimage.jpg?itok=cLn4wRB0&timestamp=1454003484 561w" src="http://mysite.com/sites/default/files/styles/style_thumbnail_2x/public/style/myimage.jpg?itok=3MQmvtDN&timestamp=1454003484">
<!-- <![endif]-->
</picture>
🐛 Bug report
Status

Closed: outdated

Version

2.0

Component

Code

Created by

🇺🇸United States albertski

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 9 months ago →
    🇬🇧United Kingdom lesleyfernandes

    I am closing all very old tickets that have not received comments for a long time. If someone is still facing these issues, please reopen it. Feel free to contribute with more info or a patch.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024