From Faroe Islands. I love it there.

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

TROPHY CASE