Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author cubecolour

    (@numeeja)

    Please provide a link to a page on your site showing the issue which does not require a username/password to view.

    Thread Starter baffo2000

    (@baffo2000)

    Sorry – the link is unlocked now…

    Thread Starter baffo2000

    (@baffo2000)

    PS – this happens on a real iPad (4), but not on online iPad screen emulators.

    Plugin Author cubecolour

    (@numeeja)

    I can see the issue on an iPad3, however I’m not sure what is causing it. Looking at the page source, I can see that the images within the second and third tabs have larger versions specified in the srcset, whereas the first tab does not.

    To start troubleshooting the cause of the issue, please temporarily deactivate tabby responsive tabs. The tab content will then appear sequentially instead of in tabs, and we will be able to see whether the images are presented the same way on the iPad when they are not in tabs.

    Thread Starter baffo2000

    (@baffo2000)

    I have deactivated the tabs as suggested. The pictures are now scaling correctly.

    Plugin Author cubecolour

    (@numeeja)

    The be due to the responsive image using a srcset to serve different

    see this article for some background to this
    https://wptavern.com/joe-mcgill-explains-how-responsive-images-work-in-wordpress-4-4

    Looking at the markup of your images in the page source, you can see that larger versions of the image are defined for smaller devices, however for the first one, the image for smaller devices is actually

    <a href="https://classicstuition.com/wp-content/uploads/2016/06/Gaius_Julius_Caesar_100-44_BC.jpg"><img class="alignleft size-medium wp-image-6074" src="https://classicstuition.com/wp-content/uploads/2016/06/Gaius_Julius_Caesar_100-44_BC-186x300.jpg" alt="Gaius Julius Caesar (100-44 BC)" width="186" height="300" srcset="https://classicstuition.com/wp-content/uploads/2016/06/Gaius_Julius_Caesar_100-44_BC-186x300.jpg 186w, https://classicstuition.com/wp-content/uploads/2016/06/Gaius_Julius_Caesar_100-44_BC.jpg 371w" sizes="(max-width: 186px) 100vw, 186px" />
    </a>
    
    <a href="https://classicstuition.com/wp-content/uploads/2016/06/Wien-_Parlament-Tacitus.jpg"><img src="https://classicstuition.com/wp-content/uploads/2016/06/Wien-_Parlament-Tacitus-227x300.jpg" alt="Modern statue representing Tacitus outside the Austrian Parliament Building" width="227" height="300" class="alignleft size-medium wp-image-6073" srcset="https://classicstuition.com/wp-content/uploads/2016/06/Wien-_Parlament-Tacitus-227x300.jpg 227w, https://classicstuition.com/wp-content/uploads/2016/06/Wien-_Parlament-Tacitus-768x1014.jpg 768w, https://classicstuition.com/wp-content/uploads/2016/06/Wien-_Parlament-Tacitus-776x1024.jpg 776w" sizes="(max-width: 227px) 100vw, 227px" />
    </a>
    
    <a href="https://classicstuition.com/wp-content/uploads/2015/03/cicero.jpg"><img class="alignleft size-medium wp-image-2479" src="https://classicstuition.com/wp-content/uploads/2015/03/cicero-234x300.jpg" alt="Marcus Tullius Cicero" width="234" height="300" srcset="https://classicstuition.com/wp-content/uploads/2015/03/cicero-234x300.jpg 234w, https://classicstuition.com/wp-content/uploads/2015/03/cicero.jpg 594w" sizes="(max-width: 234px) 100vw, 234px" />
    </a>

    The difference in how the first image displays may be due to the first image having two jpgs defined in the srcset, and the other two images having three jpgs.

    The srcset definitions are included in the theme setup, so there may be a way to disable it in your theme or a plugin to disable the responsive image functionality may prevent this occuring – although for existing images you will need to remove the current images and add them back in after disabling responsive images.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Pictures not scaling in iOS.’ is closed to new replies.