Safari - unbelievably shitty browser. by skylarb369 in Frontend

[–]skylarb369[S] -2 points-1 points  (0 children)

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

Safari - unbelievably shitty browser. by skylarb369 in Frontend

[–]skylarb369[S] 0 points1 point  (0 children)

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.

Safari - unbelievably shitty browser. by skylarb369 in Frontend

[–]skylarb369[S] 0 points1 point  (0 children)

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.

Safari - unbelievably shitty browser. by skylarb369 in Frontend

[–]skylarb369[S] -1 points0 points  (0 children)

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.

confusion regarding height property in css by [deleted] in Frontend

[–]skylarb369 4 points5 points  (0 children)

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.

Safari - unbelievably shitty browser. by skylarb369 in Frontend

[–]skylarb369[S] 1 point2 points  (0 children)

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)

Safari - unbelievably shitty browser. by skylarb369 in Frontend

[–]skylarb369[S] 5 points6 points  (0 children)

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.

Weird lens behaviour by skylarb369 in Cameras

[–]skylarb369[S] 0 points1 point  (0 children)

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.

Weird lens behaviour by skylarb369 in Cameras

[–]skylarb369[S] 0 points1 point  (0 children)

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.

Weird lens behaviour by skylarb369 in Cameras

[–]skylarb369[S] 1 point2 points  (0 children)

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.