tstaerk / AdaptiveThumb

mediawiki extension to provide an image thumb that adapts to the window size
Other
2 stars 2 forks source link

Problem with Safari #13

Open pauco84 opened 2 years ago

pauco84 commented 2 years ago

Hi everyone, I'm using AdaptiveThumb in my wiki and works perfectly in Chrome and Firefox, but I have a problem with Safari. I have a table adapted to the screen size and in it I have 6 different images, reduced 45% but in safari is adapting only the width and not also the height. Am I doing something wrong? Here below the code that I'm using:

{| style="width: 100%; text-align: center"
| <pic src="/images/****1.jpg" width=45% height=45% link="https://www.***.com" />
| <pic src="/images/****2.jpg" width=45% height=45% link="https://www.***.com" />
| <pic src="/images/****3.jpg" width=45% height=45% link="https://www.***.com" />
| <pic src="/images/****4.jpg" width=45% height=45% link="https://www.***.com" />
| <pic src="/images/****5.jpg" width=45% height=45% link="https://www.***.com" />
| <pic src="/images/****6.jpg" width=45% height=45% link="https://www.***.com" />
| <pic src="/images/****7.jpg" width=45% height=45% link="https://www.***.com" />
|}
tstaerk commented 2 years ago

Thanks for the report, looking at it.

pauco84 commented 2 years ago

Hi @tstaerk, I also tried without the "height=", keeping only the width and leaving to the browser adapting the height but nothing changed..

tstaerk commented 2 years ago

So, plugin delivers html code to the browser and the browser has to present it. If Safari displays it differently from FireFox and Chrome, this is rather a Safari bug than one of the plugin. Of course, my plugin could generate different html code that gets displayed on all browsers equally. But if that code exists, I am not sure. Could you paste two screenshots, one from Chrome and one from Safari, and two html source accordingly?

pauco84 commented 2 years ago

Hi again. I found this pretty interesting: the code height: intrinsic seems to work in safari, but I don't know how to use it in wiki..

pauco84 commented 2 years ago

Hi, I have a news: on safari/Mac only if you put the code into a table stop working (it will adapt only the width not the height).

tstaerk commented 2 years ago

Please elaborate. What's the tag you are using, where is there a table, and which code do you mean? Do you mean that if you use a "code" tag inside a table in an html file and display it on Safari, it gets messed up irrespective of adaptivethumb?

tstaerk commented 2 years ago

I can show you how to use height:intrinsic in my plugin.

tstaerk commented 2 years ago

I accidentially unsubscribed from this and cannot find out how to subscribe again

tstaerk commented 2 years ago

Please have a look at my plugin. There you find how I insert an img tag. Cann you add this height: intrinsic? Does it fix the problem? Can I help you editing it?

pauco84 commented 2 years ago

Hi, thanks for your answer. So let me clarify.

If I use this code for a single image, it's working perfectly (see the picture): <pic src="/images/****1.jpg" width=45% height=45% link="https://www.***.com" /> image

but, If I use the same code in a table (I need to put in sequence 6 images horizontal aligned), it will adapt only the width, completing stretching the images (see the picture):

{| style="width: 100%; text-align: center"
| <pic src="/images/****1.jpg" width=45% height=intrinsic link="https://www.***.com" />
| <pic src="/images/****2.jpg" width=45% height=intrinsic link="https://www.***.com" />
| <pic src="/images/****3.jpg" width=45% height=intrinsic link="https://www.***.com" />
| <pic src="/images/****4.jpg" width=45% height=intrinsic link="https://www.***.com" />
| <pic src="/images/****5.jpg" width=45% height=intrinsic link="https://www.***.com" />
| <pic src="/images/****6.jpg" width=45% height=intrinsic link="https://www.***.com" />
| <pic src="/images/****7.jpg" width=45% height=intrinsic link="https://www.***.com" />
|}

image

What am I doing wrong in the code? Many thanks

tstaerk commented 2 years ago

the table limits the width I would say.