All geek questions in one place

CSS increase doesn't work for <img> in <a> in iOS 8 Mobile Safari

Using zoom: 0.5; , the image is obtained in the size of 0.5x, if not inside the <a> tag, but in the size of 1x, if inside the <a> tag.

This happened with iOS 8 GM (iPhone 5 simulator from Xcode 6 GM and iPad mini).

This did not happen with iOS 7.1.2 (iPhone 5) and iOS 7.0 (iPhone 5 simulator from Xcode 6 GM).

Here is an example: https://dl.dropboxusercontent.com/u/379843/ios8csszoom/test.html

 <!DOCTYPE html> <html> <body> <img src=" star-on@2x.png " style="border: 1px solid blue; zoom: 0.5;"/> <a href="#"> <img src=" star-on@2x.png " style="border: 1px solid blue; zoom: 0.5;"/> </a> <hr> <img src=" star-on@2x.png " style="border: 1px solid blue; -webkit-transform: scale(0.5);"/> <a href="#"> <img src=" star-on@2x.png " style="border: 1px solid blue; -webkit-transform: scale(0.5);"/> </a> </body> </html>

-webkit-transform works on iOS 8, but I don’t want to use it, because although the image is displayed at 0.5x, the space consumed by the <img> tag is 1x.

Any workarounds?

+6
source share
5 answers

Although not ideal, here is how I dealt with the problem:

  • Replace anchors with another element (div or span depending on the block / line)
  • Give each element a generic class name
  • Either leave href, or add the data-href property with href
  • At a high level, connect an event listener to all elements with your class name
  • The event listener reads href and then runs the routing / controller logic appropriate for your infrastructure.

Example: http://jsfiddle.net/z5crh05a/

 $(".fauxLink").on("click", function(e) { var href = $(e.currentTarget).attr("href"); e.preventDefault(); e.stopPropagation(); // navigation logic here alert("Navigate to: "+href); }); });

I hope the problem in Safari is fixed in a future iOS update.

+3
source

By default, the -webkit conversion in Safari and MobileSafari has the beginning of the "center of the center", which means that the parent container will be the same size as if it did not scale.

Adjust this by setting it to “top left” using:

 -webkit-transform-origin 0 0;

Then the whole solution will be (with support for IE9 +, FF, Chrome and Safari / MobileSafari):

  transform: scale(0.5); -ms-transform: scale(0.5); -mos-transform: scale(0.5); -webkit-transform: scale(0.5); transform-origin: 0 0; -ms-transform-origin: 0 0; -mos-transform-origin: 0 0; -webkit-transform-origin: 0 0;
+3
source

I will convert these images with a scale.

 -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5);

this also works for ios, but after that you have to change your photos!

+2
source

I figured out a workaround, but it can only be used with the webapp card. I used CakePHP and used a helper method to output all img tags, so I overridden this method to give width and height attributes and stopped using css scaling.

I used getimagesize for GD to get width and height. http://php.net/manual/ja/function.getimagesize.php

0
source

Instead of changing the layout, you can simply resize the images using a bit of javascript.

Here is a working snippet (using jQuery) of what I am currently using on my WordPress blog:

 var dmblog = { // [TRUNCATED] // ! dmblog.imgZoomResize imgZoomResize : function(element) { var zoom = element.css('zoom'); element.width(element[0].naturalWidth*zoom); element.height(element[0].naturalHeight*zoom); }, // ! dmblog.retinaImagesResize retinaImagesResize : function() { $('.post .entry-content img, .comment .comment-content img').each(function(){ dmblog.imgZoomResize($(this)); // set a handler on the resize event to resize the retina images var $w = $(window), namespace = $(this)[0].id.replace('#','.'), element = $(this), handler = function() { dmblog.imgZoomResize(element); }; $w.bind('resize'+namespace, handler); }); } }; // [TRUNCATED] // ! for single posts, load some scripts if ($('body').hasClass('single')) { // [TRUNCATED] // resize retina images dmblog.retinaImagesResize(); }

Using this workaround, you don’t need to change your CSS, anchor tags and any of your markup, just add some javascript to resize the images.

I use CSS multimedia queries to set CSS scaling to 1 on large screens and 0.5 on smaller screens. Although the scaling value no longer works, it is still 0.5 in jQuery. Since this is a responsive design, I added a handler to the window resize event to automatically resize the image up / down whenever the zoom value changes (responding to CSS media requests).

If you are not using multimedia queries to quickly change the CSS scaling value, then the amount of javascript you will need (without a handler) will be much less.

0
source

Source: https://habr.com/ru/post/975227/

More articles:


All Articles