Blurry zoomed image on Safari

[czirkoszoltan]

This is a Safari-only issue.

Sometimes the zoomed image (.fluidbox__ghost) is blurry, because Safari scales it twice. Normally, the div has two style properties, which affect scaling; the first one is the width: and height: property (which is there for the unopened image), and the second one is the transform: property (only for the opened image). Usually the original size of the image is much smaller than the zoomed one. But Safari seems to resample image twice, first for the width and height first, and then again for the transform, under certain circumstances. The result is a blurred image:

The circumsances seem to be as follows:

1. An element with position: fixed position is present on the page. AND
2. The contents of the page is long enough, so that it can be scrolled.

If either of the conditions is not met, the image is rendered correctly, even though the width, height and the transform properties generated by fluidbox are the same:

This is a test file: test-case.txt. You can comment out the yellow and green paragraph (or modify their style) to see how it affects the output.

This is clearly a bug of Safari, and I don't know whether it can be worked around somehow. Feel free to close the bug, as this is not caused by Fluidbox. I used iOS 9.3.5 on an iPhone 4.

[Mesoptier]

We've been having the exact same issue. I can think of two solutions:

• Remove position: fixed from the overlay element, but somehow keep its positioning.
• Invert the scaling of the ghost element. If the ghost has width and height set to its final size, the image is not blurred. For the animation this would then require first scaling down the image with scale(0.*, 0.*) and then scaling up to scale(1,1). --- This technique is further described here: https://aerotwist.com/blog/flip-your-animations/

I have tried my hand at the second solution, but it would take such a significant amount of work, that it might as well be a complete rewrite.

[czirkoszoltan]

My workaround for this Safari bug now looks like this:

1. Adding an event handler which puts a class on the document body when an image is opened:

$('.my-gallery a')
    .on('openstart.fluidbox', function() {
        $(document.body).addClass('fluidbox-image-opened');
    })
    .on('closestart.fluidbox', function() {
        $(document.body).removeClass('fluidbox-image-opened');
    })
    .fluidbox();

2. Adding a CSS snippet which hides all fixed elements when there is an image opened:

body.fluidbox-image-opened .every-element-which-has-position-fixed {
    visibility: hidden;
}

[argentini]

@czirkoszoltan great workaround! I'd add that if you use a fixed element, you should also add position: absolute to the class. Visibility works, but the page will move to accommodate the change in height. By floating the element it stays off the page as it does when fixed.

[Sybrenb]

I still have this problem

[czirkoszoltan]

this is a Safari bug, unfortunately

[otherjoel]

None of the fixes described here work for me, my only solution has been to disable FluidBox on Safari entirely.

[designosis]

I tried the @czirkoszoltan js+css fix, unfortunately it didn't work for me. iPhone Safari is trending. Surely this is worth fixing! I love how smoothly this module works on other browsers, but can't justify using it anymore until Safari is fixed :\ Watching releases, and hopeful.

[czirkoszoltan]

@neokio Did you hide all elements in the DOM with position:fixed? I mean, really all, not just the containers of the fluidbox instance, but any other element as well.

[designosis]

I used every fixed element in my CSS ... there were 6 in total. But I'm using a pretty large CSS framework (fomantic-ui) that probably added some I didn't check. I'll try again :)

[designosis]

Do you need to set visibility: hidden on fixed children with fixed parents? In other words ...

<div id="parent" style="position: fixed">
    Blah
    <div id="child" style="position: fixed">Blah</div>
</div>

... Will body.fluidbox-image-opened #parent { visibility: hidden } do the trick? Or children also?

EDIT: Turns out I don't have any of these anyways. The script is working, I can see (in Chrome) as the class is added to and removed from body. And I clear Safari cache via Develop tools, still no luck. Bummer!

Maybe display: flex breaks it? I'm using a sticky footer ...

[mhellmeier]

Is there any update for this?

this is a Safari bug, unfortunately

Has it already been reported to the Safari team?