strange image-shadow crop

Explorer ,
Jul 26, 2017

Copy link to clipboard

Copied

Hi guys,

has anyone out there some idea to the strange behaviour of muse rotating imageframes.
Please take a look at the attached PNG how my placed images behave.

What might be the reason for this? What is my mistake or is it a bug?

Thanks,

Ralf
Muse-Imageframe.png

Views

412

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jul 26, 2017

Copy link to clipboard

Copied

Did you try a circle image frame? Rounded corners to mimic circles aren’t necessary any more.

I can’t replicate this behaviour. What is the original and placed size of these images? Did you zoom the above images?

Is this a Muse or a browser view?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 26, 2017

Copy link to clipboard

Copied

Hello heyix07,

Even I am unable to reproduce your issue, so it might also be a visual glitch at a particular system or browser.

However, Agreeing to what our ACP has suggested, why don't you try drawing and filling a circle by ellipse tool instead of making rounded corner rectangle?

Please give it a try and let us know if that helps.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
heyix07 AUTHOR
Explorer ,
Jul 26, 2017

Copy link to clipboard

Copied

Hi Günter and Ankush,

thanks for your quick answers and suggestions. As you recommended I tried the same with native circles and circle-imageframes. And, I'm sorry to tell, there is no difference in the crop of the shadow (column 4).

I tested the preview in many browsers (Firefox, Chrome, Edge, Safari). In every browser the shadow behaves the same and is cropped. But in all others than FF the "white line" (column 3) is gone. So this is a visual glitch (of only one browser) and not a bug.

But in Safari a new problem got obvious: Using the circle-imageframe as you both mentioned displays the image in front of its frame (without cropping it). So for now using rectangles with large rounded edges might be the better way...

And I could discover the reason for the "loss of imagequality" (column 4). This is a "4K-problem". Setting the site to HiDPI renders the image correctly, but I'm wondering why this happens only in column 4 (not in col. 3 - also rotated)?

The image below is a new screenshot of Safari.

I think the Museteam should take a searching look at circle-imageframes and especially the different behaviour of rotated imageframes in combination with shadows...

Thanks, Ralf

Screenshot of Safari:

Muse-Imageframe-02-safari.png

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

As you didn’t answer my questions regarding image size (original, placed), zooming and view (Muse/browser): I made some test by my own:

  1. Showing images in front of the image frame instead of within, isn’t reproducible here. Could it be, that you inadvertently placed a rectangle instead of an image frame (the „crossed out“ rectangle in the tool bar)? If no, please, give us a .muse file showing the issue.
  2. If you place an image without any scaling (= 100% pixel size), Muse won’t touch it at all. The output quality will be exactly the input quality.
  3. If you rotate an image container, Muse doesn’t touch the image and tells the browser to use a CSS command to rotate the element. This causes the expectable losses of rotated images. Normally this is not really visible in browser (, as long as you don’t zoom in).
  4. If you rotate the image within its frame, you change the game (I think, this can’t be reproduced by CSS): Muse has to „re-construct“ the whole element and converts the complete(!) object (image, round frame, shadow) to one image and convert it to a PNG, because the resulting image has transparent (round!) and semitransparent (shadow) areas. This causes quality losses and – as a „bug“ – the clipped shadow:

Screen.jpg

Therefore one should remember the old „layout rule“: Never rotate an image within a layout application. If you need rotation, do it in your image processor.

Fortunately, in this case, the problem isn’t a real problem: If you want to rotate images within Muse, rotate the container, not the image within.

Here https://www.dropbox.com/s/6myvxv1bhj2hj9n/rotated-image-frame.zip?dl=0​ you find a .muse file demonstrating the whole problem. If you export as HTML to your computer, look into the exported „images“ folder and compare the images you’ll see what I described above.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
heyix07 AUTHOR
Explorer ,
Jul 27, 2017

Copy link to clipboard

Copied

Sorry Günter - I replied this morning to both answers (yours and Ankush's). But I did it in only one thread so that you might got not informed by the system. Sorry, this was my mistake.

Yes, it is the problem with the PNG you are showing above. Rotating the frame (not the within placed image) "solves" it. But using the circle-frame as suggested is not a reliable option. Take a look to my grafic of today - these circles cause strange behaviour in Safari.

Thanks, Ralf

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

And again: These „effects": Are they visible at normal browser view or after zooming? Or are you talking about the „uncropped“ images? I beg one more time: Give us a .muse file to have a look at.

Would be really nice, if questions are answered, …

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
heyix07 AUTHOR
Explorer ,
Jul 27, 2017

Copy link to clipboard

Copied

These effects are visible in all browser views (100% or zooming in/out)


You can find all files at Dropbox - Muse-Imagetest

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

• You know, that you „magnify“ your issue be using an image of 1000 x 1500 px size?

• Your image frame is 165 x 165 px. That means that your image has to be heavily downsampled by muse to save loading time after output:

For a „normal“ site your image simply should have 165 x 165 px (optimised in Photoshop), so Muse won’t touch it during output.

For a „HiDPI“ site your image simply should have 330 x 330 px (2x), so Muse won’t pass it through unmodified.

The „white line“ you mention is an antialiasing line and becomes more ore less visible depending on the opacity/density of the shadow. Antialiasing normally is used to soften the transition between different elements (graphic, images, fonts). In terms of web design, Antialiasing is completely under control of the browser (every browser uses its own routines) and/or the respective algorithms of your operating system. This issue even is visible in every PDF, in every vector application and appears, when elements (especially vector elements, but not only) „touch" another vector/pixel element. Adobe Acrobat for example has a toggle to switch antialiasing on or off.

I think, there is nothing, Muse can do against it.

Nevertheless, you found one bug:

If you reposition one of the placed (not filled) images within its frame, it seems to become uncropped (as you said). This happens reproducible, when a outline is applied. In this case, if you toggle the background color of the image frame from „None“ to „Transparent“ (and/or back), this redraw issue disappears. On output (Preview, browser preview, export, publish), it isn’t shown at all.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
heyix07 AUTHOR
Explorer ,
Jul 27, 2017

Copy link to clipboard

Copied

"...If you reposition one of the placed (not filled) images within its frame, it seems to become uncropped (as you said). This happens reproducible, when a outline is applied. In this case, if you toggle the background color of the image frame from „None“ to „Transparent“ (and/or back), this redraw issue disappears. On output (Preview, browser preview, export, publish), it isn’t shown at all..."

--> Changing the background color does not affect this behavior in my environment, but toggeling the border on/off displays the cropped image correctly again.

But the circle imageframes were displayed wrong in Safari. The (un)cropped image is shown in front of it's frame (look at my latest graphic above - this is a view of the exported HTML in browser). This doesn't happen with rounded rectangles. Here might be another bug while exporting the files (or does Apple make their own rules?)...

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

heyix07  schrieb

--> Changing the background color does not affect this behavior in my environment, but toggeling the border on/off displays the cropped image correctly again.

Look this screencast: https://www.dropbox.com/s/g33xqn8dxanjxl3/Image-clipping.mov?dl=0

heyix07  schrieb

But the circle imageframes were displayed wrong in Safari. The (un)cropped image is shown in front of it's frame (look at my latest graphic above - this is a view of the exported HTML in browser).

Screenshot latest Safari, latest Chrome, macOS 10.12.9, Muse 2017.0.4.8( I opened your .muse file, exported as HTML, and opend the site in Safari and Chrome.):

screen.jpg

Can’t do more …

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
heyix07 AUTHOR
Explorer ,
Jul 28, 2017

Copy link to clipboard

Copied

Finally it looks to me like a WIN/MAC (displaying in browser) problem. As I can read above you are on MAC with OS 10, I'm on a PC with WIN10. Both screenshots of the same HTML file (exported from Muse 2017.0.4.8, CL 805099) look on my workstation like this:

Chrome  60.0.3112.78                                                         Safari  5.34.57.2 for WIN (latest Version / no update til today)

Muse-Imageframe-02-chrome 60-0-3112-78 WIN10.pngMuse-Imageframe-02-safari 5-34-57-2 WIN10.png

I think we can't find a solution for this... Thanks!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Jul 28, 2017

Copy link to clipboard

Copied

Pavel Homeriki, Ussnorway, fotoroeder , could you as PC users have a look at the file heyix07​ provided and tell us if the issue show up in your browsers?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jul 28, 2017

Copy link to clipboard

Copied

I use an old mac from 2011.

All browsers on my side show no issues as far as I can see.

Uwe

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Guide ,
Jul 28, 2017

Copy link to clipboard

Copied

Yes, I have the same thing. It looks like it's a bug.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jul 28, 2017

Copy link to clipboard

Copied

the images and shadows rendor correct in my i7 Windows system... I would assume your Macs Gcard | driver is the base cause as Muse gets the image data from there

images

Screenshot (1243).png

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Guide ,
Jul 28, 2017

Copy link to clipboard

Copied

At me it happens on Windows 10

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jul 29, 2017

Copy link to clipboard

Copied

yes sorry we are having this talk in two forums... it is turning the jpeg into a png because you are resizing it larger and adding blank space.

the resize causes the loss of rendor quality in jpeg images

the blank space is the gap i.e, turning the image makes it a diamond instead of a square

the fix is to open the image in Photoshop, make the canvas bigger, transform to the new angle | add a background color and resave as a new jpeg

Screenshot (1244).png

Screenshot (1245).png

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
heyix07 AUTHOR LATEST
Explorer ,
Jul 30, 2017

Copy link to clipboard

Copied

You said "the images and shadows rendor correct in my i7 Windows system... I would assume your Macs Gcard | driver is the base cause as Muse gets the image data from there" and attached a screenshot of Firefox. That's not the display-problem I mentoined. Only Safari on WIN10 displays the uncropped images in front of their frames. And it has nothing to deal with the Gcard driver. I opend the same HTML on my workstation (Nvidia K1200 with the latest driver) and on my laptop (Nvidia Geforce GT 750M latest driver) - in Safari both look the same (false)...
During the weekend I searched on the web and found out that Apple stopped support for Safari for WIN a few yaers ago. The latest versions are 5.1.7. Many users warn against using them on WIN10 - old and leaky. They recommend Edge, Chrome and Firefox
So therefore this "problem" might be caused by this.

We can't find a solution for WIN10 Users who use the old Safari. I will leave them out and use circle imageframes in my project. They looked good in all browsers and I will remove Safari from all my WIN-Systems immediately.

Thanks to all who got involved to this discussion!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more