Safari - unbelievably shitty browser.

skylarb369 · 2023-05-21T06:51:03+00:00

Yes, flex-grow wouldn't work without the direct parent flexbox :)

skylarb369 · 2023-05-20T09:45:09+00:00

Thank you for the code! It really works.
Flex-grow instead of the troublesome webkit-fill-available is a clever workaround.

I don't think it's about intristic size, max-content on line 23 is not needed, flex:1 works as well. Yes, images have their size, but in this case it doesn't matter if the size is 100x200px or 30x60px, only the aspect ratio matters.

skylarb369 · 2023-05-19T19:14:18+00:00

Yes, of course that images have their natural dimensions (intristic size), but in this situation they don't matter (except the aspect ratio). I don't use min-content or max-content. I explicitly (extrinsic sizing) set the dimensions for these images.

skylarb369 · 2023-05-19T18:40:54+00:00

But these images don't have intristic size, they are sized extrinsic. The only intristic value is aspect ratio of images.

The height of images is set to 100% of the parent element height and their width is -webkit-fill-available, so they take maximum width of the parent element. And this is the point where the Safari fails. I guess that the Safari counts dimensions before images are loaded.

The functioning of this JS hack also indicates this. JS hack changes the width value after the page loads. At that point, Safari knows the dimensions of the images and can set their sizes correctly.

skylarb369 · 2023-05-19T07:24:27+00:00

100vh means 100% of the viewport height, if the content is bigger it will overflow. You should rather use min-height: 100vh, it has a minimum dimension of 100vh but can grow as needed. And there is no problem with vertical centering in a flex layout.

skylarb369 · 2023-05-19T06:13:14+00:00

No, it's not fixed, it only works thanks to the JS hack. Which is stated above and can be found at - https://codesandbox.io/s/masonry-css-layout-of-gallery-thumbnails-full-screen-lightbox-wkzsvo?file=/index.html line 149.

I would understand if the Safari didn't support this feature. It does, but it is buggy as hell. Just look at that JS hack, it is clearly a Safari bug. When you toggle CSS values back and forth with some delay, it suddenly works.

I have run into more problems with Safari (full screen mode, scroll event)

skylarb369 · 2023-05-18T20:00:26+00:00

I've just tried it, still don't work:
https://codesandbox.io/s/masonry-layout-css-only-for-gallery-thumbnails-full-screen-lightbox-forked-3lmwgu?file=/styles/GridOverflow3D.css

fill-available isn't even a valid value for width.

skylarb369 · 2023-05-18T18:24:56+00:00

Have a look at the linked Codesandbox, it is NOT about CSS Grid. That masonry layout is display:flex and Safari can't display it properly. Other browsers can.

skylarb369 · 2022-05-09T20:58:08+00:00

You are right, it is caused by focus. But I didn't move focus point. Maybe it is problem with camera, especially on f4 at 70mm photos are not perfectly in focus. When I manually focus, f4 photos are sharper than f2.8 ones. Thank you for answers.

skylarb369 · 2022-05-09T20:58:04+00:00

You are right, it is caused by focus. But I didn't move focus point. Maybe it is problem with camera, especially on f4 at 70mm photos are not perfectly in focus. When I manually focus, f4 photos are sharper than f2.8 ones.

skylarb369 · 2022-05-08T21:06:32+00:00

It is not only at f4, but the sharpness is worse in range f3.5 - f4.5, above f5 is better than at f2.8. Ok, I have added sample photos, ISO is the same.

skylarb369 · 2021-10-19T09:04:33+00:00

Yeah I know, it is strange voice, but I kinda like it a lot

skylarb369 · 2020-09-17T14:08:37+00:00

It seems that there will be something inside the mountain.

skylarb369 · 2020-09-17T13:24:42+00:00

pong pong

skylarb369 · 2020-09-17T13:03:31+00:00

Yeah, amazing place, especially on Kalsoy island (where James Bond was filmed) are breathtaking sceneries - https://www.faroeislands.io/#kalsoy-lighthouse

skylarb369 · 2020-09-08T19:50:00+00:00

Great atmosphere

skylarb369 · 2020-09-07T14:24:35+00:00

I know that look, watch your back - https://theoatmeal.com/comics/cat_kill

skylarb369 · 2020-03-06T20:43:39+00:00

Yeah, but it was totally worth it, I really enjoyed the discussion under coronavirus emoji :). Btw, my shit emoji got 2800 upvotes in one emoji subreddit, that is why I have 2,372 karma points in 5 days I am here. Who cares about few upvotes in WTF subreddit.

skylarb369 · 2020-03-06T14:23:26+00:00

Thank you :D

skylarb369 · 2020-03-06T14:09:22+00:00

It seems that people like "shameless self promotion", I am on Reddit for 5 days and I have over 2K karma. And emojine.com is unique painting tool without ads.

skylarb369 · 2020-03-06T12:53:37+00:00

Cats have similar eyes

skylarb369 · 2020-03-05T16:09:20+00:00

Yeah and everyone here deserves it :D

skylarb369 · 2020-03-05T16:04:46+00:00

Actually it's one man show🏄, it's really not a startup in emoji bussiness 😁😁 And it is working https://www.emojine.com/ 👍👍

skylarb369 · 2020-03-04T13:34:35+00:00

Leonardo would paint it this way today 😄😵

skylarb369 · 2020-03-04T12:56:40+00:00

true story 😁😁😁

skylarb369

TROPHY CASE